d3.js - D3.js 積み上げ棒グラフ、垂直から水平へ

Question

この縦棒グラフ ( http://bl.ocks.org/mbostock/3886208 ) を横棒グラフにするのが好きです。

ご協力いただきありがとうございます！

コード例はいいでしょう。

Answer 1

ドメイン、軸、そして rect の計算を逆にするだけです。

var y = d3.scale.ordinal()
    .rangeRoundBands([height, 0], .1); // y becomes ordinal

var x = d3.scale.linear()
    .rangeRound([0, width]); // x becomes linear

// change state group to be positioned in the y now instead of x
var state = svg.selectAll(".state")
      .data(data)
      .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(0," + y(d.State) + ")"; });

// rect calculations become
 state.selectAll("rect")
    .data(function(d) { return d.ages; })
    .enter().append("rect")
    .attr("height", y.rangeBand()) // height in now the rangeband
    .attr("x", function(d) { return x(d.y0); }) // this is the horizontal position in the stack
    .attr("width", function(d) { return x(d.y1) - x(d.y0); }) // this is the horizontal "height" of the bar
    .style("fill", function(d) { return color(d.name); });

これが完全な作業例です。