d3.js - 尝试将 d3.js 过渡应用于行长，而不是权重

Question

我正在使用 d3.js 制作滴漆效果，请参阅小提琴和相关代码：

.append("line")

.attr("x1", function(d){
    return xScale(d)})

.attr("y1", 0)
.attr("x2", function(d){
    return xScale(d)})
.transition().delay(function (d,i){ return i * 500;})
 .duration(10000) 
     .attr("y2", function(d,i){
return yScale(i) ;
})

line.style("stroke", function() {
    var colors = ["rgba(242,100,5,0.7)","rgba(32,144,209,0.7)","rgba(203,214,86,0.7)"];
    var colorscale = Math.floor(Math.random() * colors.length);
    var randomcolors = colors[colorscale];
    return randomcolors;
});
line.style("stroke-width", function(d){
return strokeWidth[d] + "px" });
line.style("stroke-opacity", 1);
line.style("stroke-linecap", "round");

它的工作方式，但我无法弄清楚如何仅将过渡应用于行长。目前过渡适用于线宽和线长。提前感谢您的帮助

Answer 1

通过在保存变量时应用过渡，所有随后对设置属性的调用都适用于过渡结束。为防止这种情况，请在附加行后添加分号并将所有内容应用于保存的变量。

请参阅更新的 jsfiddle。唯一的变化基本上是

...
    .append("line");

line.attr("x1", ...)