D3.js 基礎的な棒グラフの描画

  • このエントリーをはてなブックマークに追加

棒グラフの描画

前の記事では単純にデータの取り出し方を説明しただけだったため
本記事では単純な棒グラフを描画することを目標とする。
(各グラフに値もラベルとしてつける)

// 幅(Width)と高さ( height)を初期指定
var svgWidth = 600; //SVG要素の横幅を指定
var svgHeight = 180; //SVG要素の高さを指定
var Offset = 10; //オフセット値 
var yScall = 5; // データ値を大きくする倍率
var barPadding = 2; // <-- パディング(棒の間の間隔)を追加!

// SVG 要素の生成
var svg = d3.select("body")
            .append("svg")
            .attr("width", svgWidth+Offset*2)
            .attr("height", svgHeight+Offset*2);

//SVG要素に各棒グラフを追加
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect") //rect要素を追加
    .attr("fill", function(d) { //値の大きさごとに色を明暗分け
        return "rgb(0, 0, " + (d * 10) + ")";
    })
    .attr("x", function(d, i) { //x座標指定
        return i * (svgWidth / dataset.length) +Offset; //
    })
    .attr("y", function(d) {
        return svgHeight - d*yScall;  // SVG の高さからデータの値を引く
    })
    .attr("width", svgWidth / dataset.length - barPadding)
    .attr("height", function(d) {
        return d * yScall;  // そのままでは高さが低いので大きくする
    });

//SVG要素に値ラベルを追加
svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d) {
        return d;
    })
    .attr("fill", "#fff")
    .attr("font-family", "arial")
    .attr("font-size", "11px")
    .attr("text-anchor", "middle")
    .attr("x", function(d, i) {
        return i * (svgWidth / dataset.length) + (svgWidth / dataset.length - barPadding) / 2 +Offset;
    })
    .attr("y", function(d) {
        return svgHeight - (d * yScall) +15;
    });

まとめ

See the Pen D3.js 基礎的な棒グラフの描画 by 3a works (@3aworks) on CodePen.

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。