我一直很难绕过一些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背景属性.
谢谢
解决方法
你真的不需要做任何尺度的工作,.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)) });
我还包括一个彩色的svg圈.我猜你试图用.style(“color”,“red”)来改变它的颜色;你需要使用.attr(“fill”,“red”)来表示非CSS属性.
