div要素の描画

この回では、htmlのdiv要素（）を使ってデータと関連づけてみます。
divとは、<div></div>のように表記され、指定された範囲をグループ化する機能を持ったタグです。

1. divの使用

それでは早速使ってみましょう。このサンプルでは、htmlのbody内にdivタグを配置し、cssで定義しています。

//01_1;


  
    <meta charset="utf-8">
    <title>01_1</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style type="text/css">
       div.bar{
          display: inline-block;
          width: 30px;
          height: 100px;
          background-color: blue;
       }
    </style>
  
  
    <div class="bar"></div>
  

すると、青色のバーが表示されます。

2. d3でdivを生成する

次に、div要素をd3で生成してみます。bodyの中を以下のように書き換えてみます。d3は、divを作成しなおかつそのdivにclassを設定します。

var dataset = [10, 20, 30, 40, 50];

d3.select("body").selectAll("div")   //bodyを選択し、後ほど生成されるdivを選択
  .data(dataset)                    //データ読み込み
  .enter()                          //読み込んだデータを分析し、数を確認
  .append("div")                    //divを生成
  .attr("class", "bar");            //生成したdivにclassを設定

結果は以下のようになります。それぞれdiv要素が5つ生成されています。chromeのデベロッパーツール（コマンド＋オプション+i）で確認してみましょう。

次に、d3でdiv要素の高さを設定してみます。以下のように、attr()の次にstyle()を追加します。

var dataset = [10, 20, 30, 40, 50];

d3.select("body").selectAll("div")
  .data(dataset)
  .enter()
  .append("div")
  .attr("class", "bar")
  .style("height", function(d) {
    return d + "px";
  });

以下のように、高さが10〜50ピクセルのdiv要素が生成されました。ここで初めてデータを「形」に変換したことになります。

次に、もう少し棒グラフとしての体裁を整えてあげましょう。style()を以下のように書き換えてください。

.style("height", function(d) {
    var barHeight = d * 5;          //配列の値を5倍にする
    return barHeight + "px";
});

さらに、cssで余白を設定します。

div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;  /* d3で上書きされる */
    margin-right: 2px;
    background-color: blue;
}

棒グラフらしくなりました。

このプログラムは、配列の要素を増やせば自動的に棒グラフに変換してくれます。要素数を増やしてみましょう。

var dataset = [ 5, 10, 15, 20, 25, 100, 20, 15, 80, 70]; //配列を宣言