D3.js v5 入門|#1 棒グラフを表示する

d3.js の Tutorials「Simple Bar Chart Video Tutorial」 を参考にして、棒グラフを作成しました。

以下では、棒グラフを描画するコードについて解説します。
今回描画する棒グラフはこんな感じです。

Demoを表示

1.全体のコード

2.コードの詳細

2−1.HTML

グラフを表示する場所を定義します。

2−2.JavaScript

グラフの描画を行います。

簡単な流れは、次のようになります。

d3.select(“#chart”)
グラフを描画する要素を選択します。

.data(data)
描画するデータを指定します。

.append(“div”)
描画するデータ分、div要素を追加します。
また、追加されたdiv要素には. style でスタイルを指定し、.text で テキストを設定しています。

大体流れはこんな感じです。続いて1つずつ詳細にみていきます。

① d3.select(“#chart”)

こちらは、先ほどの説明と変わらず、グラフを 描画する要素を選択します。

② .selectAll(“div”)
①で選択した要素内の、全ての div要素を選択します。
ただし、今回定義したHtmlは、<div id=”chart”></div> のため、① の要素内部には 選択できるdiv要素がありません・・・。が後ほど .append(“div”) で追加されます。

③ .data(data)
グラフに描画するデータを指定します。

④ .enter()
新たに作成した要素(今回の場合は、.append(“div”) で追加される div要素 )をDOMに反映します。
.enter() は、新たに作成された要素をDOMに反映させる役割を持ちます。
詳細な解説は、「enter、update、exit の使い方」を参照してください。

⑤ .append(“div”)
① 
で選択した要素内に、③で指定したデータ分のdiv要素を追加します。
また、追加したdiv要素には、.style、.text で指定されたスタイルとテキストが適用されます。

2−3.HTMLのBefore・After

Before

After

.append(“div”) で新たに データ分のdiv要素が追加されました。

3.まとめ

棒グラフを作成しましたが、d3.js のお作法的な書き方があり、慣れるまで若干時間がかかりそうです。

また、「enter、update、exit」の考え方は重要になるので、ぜひ「enter、update、exit の使い方」を参照してみてください。

次回は、SVGを追加ってグラフを作成します。