Question

我正在尝试创建一个从左到右的简单单个堆叠条形图。

我已经修改了代码found here，而且我已经非常接近了。但是，堆叠数据方向错误。

索引0处的数据全部在右边，而索引2处的数据一直在左边。

我觉得它与矩形和过渡有关，但我不确定我哪里出错了。

var rect = layer.selectAll("rect")
  .data(function(d) {
    return d;
  })
  .enter().append("rect")
  .attr("y", function(d) {
    return y(d.y);
  })
  .attr("x", 0)
  .attr("height", y.rangeBand())
  .attr("width", 0);

rect.transition()
  .delay(function(d, i) {
    return i * 10;
  })
  .attr("x", function(d) {
    return x(d.x0 + d.x);
  })
  .attr("width", function(d) {
    return x(d.x0) - x(d.x0 + d.x);
  });

Fiddle

Answer 1

您的堆栈从右侧开始的主要原因是您的比例[width，0]的范围与您的域[0，xStackMax]反向相关。较小的输入值将导致较大的输出值，因此您的第一个x / x0值将以比例的“宽度”末端的值结束。

解决这个问题，让他们朝着同一个方向前进。

var x = d3.scale.linear()
  .domain([0, xStackMax])
  .range([0, width]);

然后更改x和宽度.attr计算，rects从它们的缩放x0坐标开始，并且与x（d.x0 + d.x） - x（d.x0）之间的差异一样宽。对于线性标度，可以将其简化为x（d.x）

  .attr("x", function(d) {
    return x(d.x0);
  })
  .attr("width", function(d) {
    return x(d.x0 + d.x) - x(d.x0);
  });

https://jsfiddle.net/zkbxeby8/14/

堆积的酒吧从右到左而不是从左到右

1 个答案: