Question

在处理d3.js时我是新手。

我想知道我们如何根据时间动画一些数据（例如改变颜色）。

例如。比方说，在监控应用程序中，我将通过美国地图投影群集数据。投影是通过绘制一个圆圈并根据其状态填充红色，绿色或黄色来完成的。

当我们开始监控时，理想情况下所有圆圈都将填充“绿色”颜色，然后随着时间的推移，颜色可能会变为“黄色”或“红色”，具体取决于群集的行为方式。

因此，如果我需要在某个时间窗口中随着时间的推移播放这些颜色，那怎么办呢？

如果您能指出任何类似的例子，那也会有所帮助吗？

由于

Answer 1

看看http://mbostock.github.com/d3/tutorial/bar-2.html。基本上，当您想要更新图表时，您需要一个redraw函数。（注意：这个函数的名称没有什么特别之处，你可以随意调用它。）

您可以使用setInterval创建基本计时器，这是您的图表更新的费率。

setInterval(function() {
  redraw();  // call the function you created to update the chart
}, 1500);

然后定义redraw以更新图表数据。这是条形图的重绘功能，但你的类似。您只需根据数据而不是y位置和高度调整颜色。

function redraw() {
  // Update…
  chart.selectAll("rect")
      .data(data)
    .transition()
      .duration(1000)
      .attr("y", function(d) { return h - y(d.value) - .5; })
      .attr("height", function(d) { return y(d.value); }); 
}

请注意，这是一个简化版本，我建议您阅读我上面链接的页面，以获得更完整的示例。

如何在d3.js中制作动画并播放？

1 个答案: