翻转D3堆积条形图的x轴

Question

“Interactive Data Visualization for the Web”的第11章介绍了如何使用D3.js library创建堆积条形图。该示例生成一个倒置图表，其中条形图连接到x轴的顶部。

翻转图表并将它们附在底部留给读者练习。

鉴于这个起点：

<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

我提出的解决方案涉及三个变化：

1. 从：

   更改yScale .range

   .range([0, h]);
   

   为：

   .range([h, 0]);
   

2. 从：

   更改rect“y”.attr

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

   为：

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

3. 从以下位置更改rect“height”.attr：

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

   为：

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

应用这些更改后，堆栈会附加到底部并仍然保持其相对大小。