我一直难以理解一些 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 背景属性。
谢谢
最佳答案
你真的不需要用秤做任何工作,.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")
来改变它的颜色;对于非 CSS 属性,您需要使用 .attr("fill", "red")
。
关于javascript - 使用时间流逝的 d3 中的颜色过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17438409/