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");
そのような作業ですが、トランジションを行の長さにのみ適用する方法がわかりません。現在、遷移は線の長さと同様に線の太さに適用されます。事前にご協力いただきありがとうございます