javascript - 使用时间流逝的 d3 中的颜色过渡

Question

我一直难以理解一些 D3 概念(我对 javascript 相对较新，这无济于事)。我想要做的是有一个状态指示器，从绿色开始，慢慢变黄，然后慢慢变红。如果发生某些事件(按下按钮、收到消息等)，我希望指示器返回绿色，重新开始转换。

这是一个简单的示例(在 jQuery 中)，显示了基本的视觉效果(无法重置)http://jsfiddle.net/N4APE/

在 D3 中，我的想法是将背景颜色映射到经过的毫秒数。我试图创建一个这样的比例:

//10 sec is yellow, 30 sec is red
d3.scale.linear().domain([0, 10000, 30000]).range(["#00ff00", "#ffff00", "#ff0000"]);

但现在我有点迷路了。我一直在玩过渡、补间和插值器的组合，但我似乎没有取得任何进展。这是让它工作的一些可悲的尝试http://jsfiddle.net/Ebuwa/

我的问题:

• 我不知道如何将经过的毫秒转换与我的比例相关联，然后设置背景颜色
• 我的转换似乎在我创建它时运行，而不是在我调用它时运行，并且它在错误的元素。
• 我不确定在解决其他问题后如何重置过渡以使其保持绿色。

另一个注意事项，我可能会很高兴使用 svg 圆圈或类似的东西来代替，但我在操作 svg 填充属性时运气不佳，因为我有一个 html 背景属性。

谢谢

Answer 1

你真的不需要用秤做任何工作，.transition()将负责幕后的辛勤工作:

function changeElementColor(d3Element){
    d3Element
    .transition().duration(0)
      .style("background", "green")
    .transition().duration(1000)
      .style("background", "yellow")
    .transition().delay(1000).duration(5000)
      .style("background", "red");
}
changeElementColor(d3.select("#d3Color"));

要重置过渡，只需向元素添加一个 onclick 事件:

d3.select("#d3Color")
  .on("click", function(){ changeElementColor(d3.select(this)) });

http://jsfiddle.net/N4APE/2/

我还包含了一个彩色 svg 圆圈。我猜你正试图使用​​ .style("color", "red") 来改变它的颜色；对于非 CSS 属性，您需要使用 .attr("fill", "red")。