我一直很努力地将注意力集中在一些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属性。

    10-05 20:43
    查看更多