Question

我希望标题清晰。

让我们说在D3中你有一个简单的鼠标悬停脚本 - 它可以是任何东西 - 它会改变底层的svg对象的笔触颜色。您的代码如下所示：

d3.select(this.parentNode.appendChild(this)).transition().duration(90)
             .style("stroke-width","2").style("stroke","white");

是否有可能知道在完成其周期的过程中有多远？

例如，假设将“到目前为止的持续时间”分配给变量Y.然后我们可以这样说：

d3.select(this.parentNode.appendChild(this)).transition().duration(90)
                 .style("stroke-width","2").style("stroke", function(d,Y){return "rgb(\"" + Y + "255,255\" )"});

结果将是笔划RGB值取决于持续时间结束前的时间。

有什么想法吗？

Answer 1

使用自定义功能时，您在这些方面非常灵活。在这里，你指的是＆＃39; style＆＃39;属性，因此您可能希望查看styleTween，例如这样：

d3.select('#rect1')
   .transition().duration(500)
   .style("stroke-width", "10px")
   .styleTween("stroke", function() {
       return d3.interpolate("green", "red");
    });

或者，您可以定义自定义函数，例如：

function interpolateGeneric(col1, col2) {
    return function(t) {
        return d3.interpolate(col1, col2)(t);
    };
}

请注意参数t，它为您提供转换的进度。

然后：

d3.select('#rect2')
    .transition().duration(500)
    .styleTween('stroke', function() {
        return interpolateGeneric('green', 'blue');
   })
   .style("stroke-width", "10px")

要修改＆＃39; attr＆＃39;，请查看attrTween。

参见例如在这里：http://bost.ocks.org/mike/transition/

是否可以使用.transition（）。duration（）中传递的时间作为变量？

1 个答案: