D3.js 3.5.9

今回は、配列を使って描画してみます。

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

---javascript04.ts---

function show04()
{
   var dataset:number[] = [ 5, 10, 15, 20, 25 ];
   
   d3.select("body")   // body 要素の検索
      .selectAll("p")  // p要素を検索。この段階ではp要素は存在しないので空オブジェクトを次のメソッドチェーンに渡す
      .data(dataset)   // 要素数を数える
      .enter()         // データにバインドされた要素を新規に生成する.DOM 要素数よりデータ数が多い場合はプレースホルダ要素を生成する。
                       // なおプレースホルダとは最終的な値が決まるまでの間仮に確保しておく、仮置き場
      .append("p")     // p要素追加
      .text( (d) => {  // 値を配列要素分、出力
          return d;
      })
      .style( "color", (d) => {   // フォントカラーを条件分岐して指定
          if( d > 15 ){
             return "red";
          }else{
             return "black";
          }
     });
}