D3.js 3.5.9

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

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

---javascript10.ts---

function show10()
{
   var width: number = 500;
   var height : number = 200;
   var barPadding:number = 1;   // 棒の間隔
   
   var svg = d3.select("body")
               .append("svg")
               .attr("width", width )
               .attr("height", height );
   
   var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                  11, 0, 15, 20, 18, 17, 16, 18, 23, 25 ];
   
   // 値の最大値を取得
   var max = ( () => {

           var n:number = 0;

           for( var obj of dataset ){
              if( n < obj ){
                 n = obj;
              }
           }

           return n;
   })();
   
   // 棒グラフ描画
   var rects = svg.selectAll("rect")
                    .data(dataset)
                    .enter()
                    .append("rect");
   
   // d: 値
   // i: インデックス
   rects.attr("x", (d, i ) => {
             return i *( width / dataset.length );
          })
          .attr("y", (d) =>{
             return height - height * d / max;   // SVG での矩形の開始位置の座標は、左上が原点( 0, 0 )
          })
          .attr("width", width / dataset.length - barPadding )   // 横幅を少し小さくして隙間を開ける
          .attr("height", (d) => {
             return height * ( d / max );
          })
          .attr("fill", (d) => {

             var n:number = d / max;
             
             // 値の大きさにより色を変える
             if( n > 0.8 ){
                return "rgb(255, 100, 100 )";
             }
             else if( n > 0.3 ){
                return "rgb(100, 150, 255)";
             }
             else{
                return "rgb(0, 255, 0 )";
             }
          });

   // 値を文字描画
   var texts = svg.selectAll("text")
                    .data(dataset)
                    .enter()
                    .append("text");

   texts.text( (d) => {
           return d;
        })
        .attr( "x", (d, i) => {
           return i *( width / dataset.length );
        })
        .attr( "y", (d) => {
           var h:number = height - height * d / max + 15;
           if( h - height > 0 ){
              h = height - 15;
           }
           
           return h;
        })
        .attr( "font-family", "cursive" )   // フォント指定
        .attr("text-anchor", "middle")      // 文字を中央寄せ
        .attr("x", (d, i) => {              // 中央寄せのための文字の中心座標を指定
           return i *( width / dataset.length ) + width / dataset.length * 0.5;
        });
}