D3.js 3.5.9

■D3.js でCSV読み込み [ サンプルページの表示 ] Prev Top Next
関連ページ:

今回は、D3.jsで使えるメソッドを使用してCSVファイルを読んで棒グラフを表示します。


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

---javascript13.ts---

function show13()
{
   var width: number = 500;
   var height : number = 200;
   var padding:number = 25;   // オフセット値
   
   var svg = d3.select("body")
               .append("svg")
               .attr("width", width )
               .attr("height", height );
   
   var dataset;
   d3.csv("test.csv", (error, dataset) => {
      console.log( dataset );

      // x 座標を入力ドメインおよび出力レンジから生成
      // 入力ドメインは入力値の分散値、出力レンジは画面表示上の大きさの分散値を指定
      var xScale = d3.scale.linear()                                                // 線形スケール
                        .domain([0, dataset.length])
                        .range([padding, width - padding]);                  // 出力レンジ:0〜SVGの横幅いっぱいの範囲( 適当に調整している )

      // y 座標を入力ドメインおよび出力レンジから生成
      var yScale = d3.scale.linear()                                                // 線形スケール
                        .domain([0, 100])
                        .range([height - padding, padding]);                     // 出力レンジ:0〜SVGの縦幅いっぱいの範囲( 適当に調整している )
                                                                                 // 左上が原点なので逆転させる

      // 棒グラフ描画
      var rects = svg.selectAll("rect")
                    .data(dataset)
                    .enter()
                    .append("rect");

      // d: 値
      rects.attr("x", (d, i) => {
               return xScale(i);
            })
           .attr("y", (d) => {
               return yScale(d.点数);   // なぞ
            })
            .attr("width", 30 )
            .attr("height", (d) => {
               return height - padding - yScale(d.点数);   // なぞ
           })
          .attr("fill", (d) => {
               if( d.点数 >= 80 ){
                  return "#afafff";
               }
               else if( d.点数 <= 30 ){
                  return "#ff5f5f";
               }
               else{
                  return "#0fff0f";
               }
           });

      // 軸生成
      var xAxis = d3.svg.axis()
           .scale( xScale )     // スケールから軸を生成する
           .orient("botton")    // 軸を下側にラベル表示
           .ticks(5)            // メモリ数を5に指定( 実際にはいい感じに表示されるようにメモリ数を増減する )
           .tickSize(6,         // 軸から出る目盛りの長さ
                   -height + padding * 2  // 外枠の長さ
                    )
           .tickFormat( function(d, i){
              if( dataset.length > i )
              {
                  return dataset[i].科目;
              }
            });
      svg.append("g")            // SVG用の要素。オブジェクトをグループ化する。
         .attr("class", "axis")  // スタイルシートで属性を変更するためにclass属性を追加
         .attr("transform", "translate( 0, " + ( height - padding ).toString(10) + ")" )   // y方向に平行移動( 原点は左上 )
         .call(xAxis);

      var yAxis = d3.svg.axis()
           .scale( yScale )     // スケールから軸を生成する
           .orient("left")      // 軸を左側にラベル表示
           .ticks(5)            // メモリ数を5に指定( 実際にはいい感じに表示されるようにメモリ数を増減する )
           .tickSize(6,         // 軸から出る目盛りの長さ
                   -width + padding * 2  // 外枠の長さ
                    );
      svg.append("g")            // SVG用の要素。オブジェクトをグループ化する。
         .attr("class", "axis")  // スタイルシートで属性を変更するためにclass属性を追加
         .attr("transform", "translate( " + ( padding ).toString(10) + ", 0 )" )   // x方向に平行移動
         .call(yAxis);
   });
}
---test.csv---
科目,点数
国語,30
数学,89
理科,73
"社会",65
"英語",70
---stylesheet13.css---
.axis path,
.axis line{
   fill: none;                    /* 塗りつぶさない */
   stroke: black;                 /* 線の色 */
   shape-rendering: crispEdges;   /* アンチエイリアスを無効 */
}

.axis text {
   font-family: sans-serif;
   font-size: 13px;
}

Prev Top Next
inserted by FC2 system