Question

I’m making a dripping paint effect using d3.js see fiddle and relevant code:

.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");

Its kind of working but I can’t work out how to apply the transition to the line length only. Currently transition is applied to line weight as well as line length. Thanks for your help in advance

Answer 1

By applying the transition when saving the variable, all the subsequent calls to set attributes apply to the end of the transition. To prevent this, add a semicolon after appending the line and apply everything to the saved variable.

See the updated jsfiddle. The only changes are basically

...
    .append("line");

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