次のようなものでpath作成したd3ものがあるとします。
line = d3.line()
.curve(d3.curveLinear)
.x(function(d) { return x(d.x);})
.y(function(d) { return y(d.y); });
data = [{x: 0, y: 0}, {x: 5, y: 5}, {x:10, y:10}];
myLine = svg.append("path")
.attr("fill", "none")
.attr("stroke", "steelblue")
.datum(data)
.attr("d", line);
これにより、0から10までの対角線が作成されます。データを更新して変更を加え、ポイントを追加すると、次のようになります。
data = [{x: 1, y: 1}, {x:2, y:3}, {x: 6, y: 7}, {x:9, y:9}];
そして私の行を更新します
myLine.datum(data).transition().duration(1000).attr("d", line);
これは、既存のパスをスライドさせて新しいパスの最初の3つのポイントに合わせ、最後のポイントを厄介に最後に追加するという奇妙な遷移を提供します。
同様に、ポイントが少なくなるように更新すると、線を短くしてから、線の形状を変更するのではなく、残りの部分をスライドさせます。
これが発生する理由は理解していますが、よりスムーズな移行を作成する方法があるかどうか疑問に思っています。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加