Time 如何在d3.js中设置动画并随时间播放？

我在d3.js上是个新手

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

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

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

所以，如果我需要在某个时间窗口中播放这些随时间变化的颜色，该如何做呢

如果你能给我举一个类似的例子，那也会有帮助吗

谢谢

看一看。基本上，您需要一个

重画
函数，每当您想更新图表时都会调用该函数。（注意：此函数的名称没有什么特别之处，您可以随意调用它。）

您可以使用
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); }); 
}

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