D3.js 3.5.9

今回は、htmlタグを使用して配列データを単純な棒グラフで描画してみます。

html の内容はサンプルページを見ていただくとして、スクリプトはTypeScriptを使用するため、下記のソースを Playground でJavaScriptコードにコンパイルして使用してください。

---javascript05.ts---

function show05()
{
   var dataset:number[] = [ 5, 10, 15, 20, 25 ];
   
   d3.select("body")     // body 要素の検索
      .selectAll("div")  // div要素を検索。この段階ではdiv要素は存在しないので空オブジェクトを次のメソッドチェーンに渡す
      .data(dataset)     // 要素数を数える
      .enter()           // データにバインドされた要素を新規に生成する.DOM 要素数よりデータ数が多い場合はプレースホルダ要素を生成する。
                         // なおプレースホルダとは最終的な値が決まるまでの間仮に確保しておく、仮置き場
      .append("div")     // div要素追加
      .style( "display", "inline-block" )
      .style( "width", "20px" )
      .style( "height", (d) => {   // スタイルシートでdiv要素の高さを設定
         var height:number = d * 5;
         return height.toString(10) + "px";
      })
      .style( "background-color", "teal" )
      .style( "margin-right", "2px" )
}