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

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

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

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>d3.js tutorial #1 | bar chart </title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/d3.min.js"></script>
    <style type="text/css">
      #chart div {
        font: 15px "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
        background-color: steelblue;
        text-align: right;
        padding: 3px;
        margin: 1px;
        color: white;
      }
    </style>
  </head>
  <body>

    <div id="chart"></div>

    <script>
      var data = [100, 150, 200, 250, 300];

     d3.select("#chart")
         .selectAll("div")
         .data(data)
           .enter()
           .append("div")
             .style("width", function(d) { return d + "px"; })
             .text(function(d) { return d; });

    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>d3.js tutorial #1 | bar chart </title>

#chart div {

font: 15px "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;

background-color: steelblue;

text-align: right;

padding: 3px;

margin: 1px;

color: white;

}

</style>

</head>

<body>

var data = [100, 150, 200, 250, 300];

d3.select("#chart")

.selectAll("div")

.data(data)

.enter()

.append("div")

.style("width", function(d) { return d + "px"; })

.text(function(d) { return d; });

</script>

</body>

</html>

２．コードの詳細

２−１．HTML

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

<div id="chart"></div>

1	<div id="chart"></div>

２−２．JavaScript

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

<script>
  var data = [100, 150, 200, 250, 300]; // 描画用データ

 d3.select("#chart")
     .selectAll("div")  
     .data(data)
       .enter()
       .append("div")
         .style("width", function(d) { return d + "px"; })
         .text(function(d) { return d; });

</script>

var data = [100, 150, 200, 250, 300]; // 描画用データ

d3.select("#chart")

.selectAll("div")

.data(data)

.enter()

.append("div")

.style("width", function(d) { return d + "px"; })

.text(function(d) { return d; });

</script>

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

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

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

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

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

① 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 で指定されたスタイルとテキストが適用されます。

２−３．HTMLのBefore・After

Before

<div id="chart"></div>

1	<div id="chart"></div>

After

<div id="chart">
  <div style="width: 100px;">100</div>
  <div style="width: 150px;">150</div>
  <div style="width: 200px;">200</div>
  <div style="width: 250px;">250</div>
  <div style="width: 300px;">300</div>
</div>

</div>

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

３．まとめ

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

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

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