嘗試應用d3.js過渡到線的長度，不重

Question

我正在使用d3.js see fiddle和相關代碼滴落的油漆效果：

.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

通過在保存變量時應用轉換，所有後續對設置屬性的調用都會應用到轉換的結尾。爲防止出現這種情況，請在追加行後添加分號並將所有內容應用於保存的變量。

請參閱the updated jsfiddle。唯一的變化基本上是

... 
    .append("line"); 

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