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); }); 

下面是完整的工作example。