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

我希望标题是清楚的

假设在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

---

参见此处示例：

您想做什么？你知道你可以用CSS转换颜色吗？@Jonathan这是一个通用的用例。当然你可以用CSS转换颜色，但是D3比CSS有更多的功能，我想利用。我删除了我的答案。我不知道他用的是D3。我认为D3也有缓和的迹象。缓解功能可以访问持续时间信息。若并没有，你们可以自己追踪它，并在一个缓和的函数中使用它。@ChristopherWhite补充说明这是针对D3的。