使用时间过去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 fill属性,因为我有一个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")改变它的颜色; 你需要.attr("fill", "red")用于非CSS属性.