是否可以使用 .transition(） .duration(） 中经过的时间作为变量

Is it possible to use the time passed in a .transition() .duration() as a variable?

本文关键字：时间 变量 经过 duration 可以使 transition 是否      更新时间：2023-09-26

我希望标题很清楚。

假设在 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 值取决于持续时间完成之前的时间。

有什么想法吗？

使用自定义函数时，您在这些事情上非常灵活。在这里，您指的是"样式"属性，因此您可能需要查看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")

要修改"attr"，请查看attrTween 。

例如，请参阅此处：http://bost.ocks.org/mike/transition/

相关文章：