重启D3条形图动画

Question

我正在制作一个小部件，在一个滑动式旋转木马中，一个接一个地显示具有不同值的多个D3条形图。

当页面加载时，条形图按原样显示动画，但当页面进入下一个图表时 - 无论是点击还是单独 - 我希望每次都重新启动动画。 我试过在控制台中调用animateChart()，但这不起作用。

我正在寻找一个可以从控制台或其他函数调用的函数，例如animateChart()，它将重新加载D3条形图动画。

这是我的小部件的链接：

http://jsfiddle.net/alocdk/oa5tg1qu/1/

Answer 1

我找到了可以增强var element功能的地方。

事实上，您只修改了输入图表的数据。

致电：

element()

此后的所有内容仅适用于新数据。

您可能需要阅读这些内容以了解D3中数据更新要遵循的模式。

• General Update Pattern, I
• General Update Pattern, II
• General Update Pattern, III

以下是我的镜头http://jsfiddle.net/uknynmqa/1/

我已经删除了你在所有svg上做的循环，因为我假设你只想为当前的那个制作动画。

您的功能正在更新所有数据，而不仅仅是那些因为以下内容而进入的数据：

animateChart

D3遵循一种非常具体的数据更新模式。

根据您的要求，您可以按照此操作进行操作。它取决于你想要制作的动画。

d3.select(svg)
        .selectAll("rect")
        .data(data)
        .enter().append("rect")
[...]