Question

我正试图让一个堆积的条形图正确地设置动画，因为条形图来去匆匆。这可能是某个地方的一个很好的例子（也许我会问一个单独的问题），但我发现的例子并没有显示出单个堆栈元素退出和进入的过渡我们要确保当栏杆退出时，它们会向下拖动它们上面的栏杆，当它们进入时，它们会向上推动它们上方的栏杆。而且我不希望在过渡期间出现任何差距或重叠。

有人能指出我这样做的一个例子吗？

纠正我的错题： Ashitaka用一个有用的jsfiddle回答了这个问题。他的回答促使我更仔细地看d3 stack layout，在那里我读到：

在最简单的情况下，图层是二维数组值。所有第二维数组的长度必须相同。

所以，我总结说我错了。我根本不应该尝试删除堆栈栏。如果我的数据中的条形图将消失，我应该将它们保留在数据中并将其高度更改为零。这样过渡效果很好。我还没有处理出现的新酒吧。

Answer 1

转换堆积图表（以及一般使用SVG）的一个令人困惑的方面是坐标系原点位于左上角，这意味着y向下增加。

首先，我们的数据应该有2个相关的属性：

y，栏的高度
和y0，当它位于其他条形顶部时，条形的基线或y位置。这应该由d3.layout.stack()计算。

然后，我们应该创建2个比例：

一个高度，完全符合预期：

var heightScale = d3.scale.linear()
  .domain([0, maxStackY])
  .range([0, height]);

一个用于y位置，它以相反的方式工作：

var yScale = d3.scale.linear()
  .domain([0, maxStackY])
  .range([height, 0]);

使用这两个比例，我们可以创建一些函数来计算我们酒吧的适当y位置和高度：

var barBaseY = function (d) { return yScale(d.y0); };

var barTopY = function (d) { return yScale(d.y0 + d.y); };

var barHeight = function (d) { return heightScale(d.y); };

接下来，我们创建一个key function以便元素绑定到正确的数据至关重要：

var joinKey = function (d) { return d.name; };

如果没有这个功能，D3会使用索引加入数据，这会破坏一切。

现在，要从堆栈中删除或添加一组条形，我们采取以下步骤：

重新计算堆栈：
```
var newStack = stack(enabledSeries());
```
使用data function：
加入当前选择的图层的新堆栈
```
layers = layers.data(newStack, joinKey);
```
使用我们的按键功能，D3确定要添加，删除或更新的条形图。
访问相应的栏：
- layers.enter()包含“输入选择”，即要添加的新条形图集。
- layers.exit()包含“退出选择”，即要移除的条形集。
- 简单地layers包含“更新选择”，即要更新的栏。但是，after enter.append the "update selection" is modified to contain both entering and updating elements。这在D3 v4中有所改变。
为条形图设置动画：
- 对于添加的栏，我们使用height 0和y位置barBaseY创建它们。然后，我们为所有条形图height和y属性设置动画。
- 对于移除的条形图，我们会将它们设置为height 0和y位置barBaseY，这与添加条形图完全相反。然后，我们为所有剩余的条形height和y属性设置动画。 D3非常聪明，可以同时渲染所有这些动画。

这是a pared down version of the stacked chart I linked to in my first comment。

here's a visual explanation of why you have to animate both y and height attributes to simulate a bar diminishing in size "going down"。

如何在d3.js中正确转换堆积条

1 个答案: