チャートのプロット
ここで、チャートを描画するロジックを追加します。 最初にdrawChart()関数の中でいくつかの定数を定義しましょう。
ここでは、SVG要素とtooltip要素を追加しています。
#container要素を選択し、その中にSVGとg要素を追加して、他のSVG要素をグループ化し、左余白と上余白を残して翻訳します。 また、tooltipContentを含むdiv要素も追加します。
次に軸のスケールとライン/パスジェネレータを定義しましょう:
d3.scaleLinear() 指定されたドメイン内の任意の数値を指定された範囲にマップします。 これらのスケールは、各データ項目のグラフ上の位置/座標を見つけるのに役立ちます。
グリッド線（必要に応じてこれをスキップできます）、X軸、Y軸、およびデータ線を描画しましょう：
まず、Y軸に沿ったグリッド線を含むSVG要素の別のグルー ラベルを描画したくないので、tickFormatを空の文字列として設定します。 これらのグリッド線の高さはチャートの高さと同じに設定されますが、—を追加して、axisBottomの上に描画され、下には描画されません。 同様に、x軸に沿ってグリッド線を描画します。
次に、実際の軸を描画し、線のパスを追加します。 この時点で、折れ線グラフはすでに作成されています。
