1

我是 d3.js 的新手。

我想知道我们如何根据时间对一些数据进行动画处理（例如更改颜色）。

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

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

因此，如果我需要在某个时间窗口内随着时间的推移播放这些颜色变化，该怎么做？

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

谢谢

4

1 回答 1

3

看看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); }); 
}

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

于 2012-09-26T00:08:49.073 回答