尝试应用d3.js过渡到线的长度，不重

我正在使用d3.js see fiddle和相关代码滴落的油漆效果：尝试应用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");

同类工作的，但我不能工作了解如何仅将过渡应用到线路长度。目前转换适用于线宽和线长。预先感谢您的帮助

来源

2013-01-13 James

通过在保存变量时应用转换，所有后续对设置属性的调用都会应用到转换的结尾。为防止出现这种情况，请在追加行后添加分号并将所有内容应用于保存的变量。

请参阅the updated jsfiddle。唯一的变化基本上是

... 
    .append("line"); 

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

来源

2013-01-13 21:35:14

感谢您的时间回答我的问题。你知道我现在如何让线条显得流畅吗？ – James

只需将'.attr（“y1”，0）'改为'.attr（“y1”，1）' - 参见http://jsfiddle.net/FgSwa/5/ –

你是一个明星，var谢谢= [ “5”]; – James

尝试应用d3.js过渡到线的长度，不重

回答

相关问题