我一直很努力地将注意力集中在一些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圆或类似的东西,但是我碰运气却和html background属性一样差。
谢谢
最佳答案
您实际上不需要对秤进行任何工作,.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属性。