翻转 D3 堆叠条形图的 x 轴

Question

“Interactive Data Visualization for the Web" shows how to create stacked bar charts with the D3.js library 的第 11 章。该示例生成一个倒置的图表，其中的条形图附加到 x 轴的顶部。

翻转图表并将它们附加到底部留作 reader 的练习。

鉴于此起点：

<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
  var w = 500;
  var h = 300;

  var dataset = [[ { x: 0, y: 5 }, { x: 1, y: 4 }, { x: 2, y: 2 }, { x: 3, y: 7 }, { x: 4, y: 23 }],
    [ { x: 0, y: 10 }, { x: 1, y: 12 }, { x: 2, y: 19 }, { x: 3, y: 23 }, { x: 4, y: 17 } ],
    [ { x: 0, y: 22 }, { x: 1, y: 28 }, { x: 2, y: 32 }, { x: 3, y: 35 }, { x: 4, y: 43 } ]];

  var stack = d3.layout.stack();
  stack(dataset);

  var xScale = d3.scale.ordinal()
      .domain(d3.range(dataset[0].length)).rangeRoundBands([0, w], 0.05);

  var yScale = d3.scale.linear()
      .domain([0, d3.max(dataset, function(d) {
        return d3.max(d, function(d) { return d.y0 + d.y; });
      })])
      .range([0, h]);

  var colors = d3.scale.category10();

  var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);

  var groups = svg.selectAll("g").data(dataset).enter().append("g")
      .style("fill", function(d, i) { return colors(i); });

  var rects = groups.selectAll("rect")
      .data(function(d) { return d; })
      .enter()
      .append("rect")
      .attr("x", function(d, i) { return xScale(i); })
      .attr("y", function(d) { return yScale(d.y0); })
      .attr("height", function(d) { return yScale(d.y); })
      .attr("width", xScale.rangeBand());
</script>

翻转图表需要做什么？

Answer 1

我提出的解决方案涉及三个更改：

将 yScale .range 更改为：
```
.range([0, h]);
```
至：
```
.range([h, 0]);
```

更改 rect "y" .attr 来自：

.attr("y", function(d) { return yScale(d.y0); })

至：

.attr("y", function(d) { return yScale(d.y0) + yScale(d.y) - h; })

更改 rect "height" .attr 来自：

.attr("height", function(d) { return yScale(d.y); })

至：

.attr("height", function(d) { return h - yScale(d.y); })

应用这些更改后，堆栈连接到底部并仍保持其相对大小。

翻转 D3 堆叠条形图的 x 轴

Flip the x-axis of a D3 Stacked Bar Chart

charts

d3.js