D3.js 棒グラフ(bar chart)

D3.jsを使って簡単な棒グラフを作成する。

サンプルプログラム

簡単な棒グラフを作成する。

サンプルコード

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>D3 bar chart basic</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>

<body>
  <script>
    // 1. データ準備
    var dataset = [
      { "name": "A", "value": 5 },
      { "name": "B", "value": 6 },
      { "name": "C", "value": 8 },
      { "name": "D", "value": 1 },
      { "name": "E", "value": 2 },
      { "name": "F", "value": 6 },
      { "name": "G", "value": 8 },
      { "name": "H", "value": 6 },
      { "name": "I", "value": 10 },
      { "name": "J", "value": 9 }
    ]
    var width = 400; // グラフ幅
    var height = 300; // グラフ高さ
    var padding = 30; // スケール表示用の余白

    // 2. SVG領域設定
    var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

    //  3. 軸スケール(目盛り)設定
    var xScale = d3.scaleBand()
      .rangeRound([padding, width - padding])
      .padding(0.1)
      .domain(dataset.map(function (d) { return d.name; }));

    var yScale = d3.scaleLinear()
      .domain([0, d3.max(dataset, function (d) { return d.value; })])
      .range([height - padding, padding]);

    // 4. 軸表示
    svg.append("g")
      .attr("transform", "translate(" + 0 + "," + (height - padding) + ")")
      .call(d3.axisBottom(xScale));

    svg.append("g")
      .attr("transform", "translate(" + padding + "," + 0 + ")")
      .call(d3.axisLeft(yScale));

    // 5. 棒を表示
    svg.append("g")
      .selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .attr("x", function (d) { return xScale(d.name); })
      .attr("y", function (d) { return yScale(d.value); })
      .attr("width", xScale.bandwidth())
      .attr("height", function (d) { return height - padding - yScale(d.value); })
      .attr("fill", "steelblue");
  </script>
</body>

</html>

コード設定

1. データ準備

軸を表示する幅を確保するために、paddingを変数として作成する。上下左右にpaddingで設定した幅の余白を設定する。

2. SVG領域設定

bodyの中にsvgタグを設定し、描画領域を準備する。

3. 軸スケール(目盛り)設定

軸の幅を画面幅に合わせるスケール変換と、軸表示用の関数を準備する。

x軸はD3の関数d3.scaleBand()を使用して設定する。

var xScale = d3.scaleBand()
    .rangeRound([padding, width - padding])
    .padding(0.1)
    .domain(dataset.map(function(d) { return d.name; }));

まず、.rangeRound(..)関数でスケール表示範囲を丸めて設定する。

.rangeRound([padding, width - padding])

ここではグラフ両端にpadding分の間隔を置くため、x軸をpaddingからwidth - paddingの範囲に設定する。

.padding(..)で棒グラフの棒と棒の間隔を0.0から1.0の比率で設定する。

.padding(0.1)

.domain(..)の部分で横軸のラベル(name)と数を設定する。

.domain(dataset.map(function(d) { return d.name; }));

引数をmapで変換して設定する。ここに設定されたラベル文字列はx軸に表示される。

y軸はD3の関数d3.scaleLinear()を使用して設定する。

  var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset, function(d) { return d.value; })])
    .range([height - padding, padding]);

d3.scaleLinear()は、domain(..)で設定したスケールをrangeで設定したスケールへ等倍変換する関数である。domainにはグラフ内の座標値として0から数値(value)の最大値(d3.max(...)で取得)を設定し、rangeには表示上の距離を考慮して範囲を設定する。paddingを考慮した範囲を設定する。y軸は画面下へ行くほど値が大きくなるため、y=0に画面下側の大きな値(height - padding)を設定する。

4. 軸表示

x、y軸を設定する。

  svg.append("g")
    .attr("transform", "translate(" + 0 + "," + (height - padding) + ")")
    .call(d3.axisBottom(xScale));
 
  svg.append("g")
    .attr("transform", "translate(" + padding + "," + 0 + ")")
    .call(d3.axisLeft(yScale));

x軸はグラフの高さ分、y軸はx軸の表示余白分だけ離して設定する。

d3.axisBottom(xScale)
d3.axisLeft(yScale)

上の関数は軸のsvg要素表示用の関数で、call(..)で呼び出すとsvg要素のlineなどを使用して軸の目盛りを表示する。

5. 棒を表示

  svg.append("g")
    .selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x", function(d) { return xScale(d.name); })
    .attr("y", function(d) { return yScale(d.value); })
    .attr("width", xScale.bandwidth())
    .attr("height", function(d) { return height - padding - yScale(d.value); })
    .attr("fill", "steelblue");

棒を表示する。xScaleにはd3.scaleBand()で呼び出した関数が設定されているが、mapした軸ラベル(d.name)を引数にすると各座標を取得できる。そして.bandwidth()で、設定したpadding()を考慮した幅を取得する。"rect"は上から右下へ四角形を表示するため、"y"属性が棒の上側の座標になる。