0

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

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

4

1 に答える 1

0

変数を保存するときに遷移を適用することにより、属性を設定するための後続のすべての呼び出しが遷移の最後に適用されます。これを防ぐには、行を追加した後にセミコロンを追加し、保存された変数にすべてを適用します。

更新された jsfiddleを参照してください。変更点は基本的に

...
    .append("line");

line.attr("x1", ...)
于 2013-01-13T21:35:14.067 に答える