2

ag 要素内の同じデータにバインドされたパスとテキストを移行する方法を理解しようとしています。

この要点は、私が望む動作を示しています。変更ボタンをクリックすると、パスとテキストの位置がスムーズに遷移します。問題は、パスとテキスト要素を別々にデータに結合することでこれを達成することです。 join this way を使用しているのは私だけではありませんが、 d3 で要素とデータ間の 1 対 1 のマッピングを維持するという目標に違反していると思います。

をエミュレートする方法はありますか

var path = svg.selectAll("path")
     .data(dataset);

path
    .enter().append("path")
    .attr("d", function(d) { return line(d.values) + "Z"; })
    .style("fill", function(d, i) { return color(i); });

path
    .transition().duration(500)
    .attr("d", function(d) { return line(d.values) + "Z"; });

path
    .exit().remove();

ag要素内の同じデータにリンクされた要素のパターン?

これは私の失敗した試みの 1 つです。パスとテキストを更新するのではなく、変更ボタンによって新しい g 要素が追加されます。

編集時に追加: explunit によって検出されたタイプミスを修正した後、失敗した試行が機能するようになりました

4

1 に答える 1

2

結合時のクラス名にタイプミスがあります。このコード:

var g = svg.selectAll(".shapes")
    .data(dataset);

これでなければなりません：

var g = svg.selectAll(".shape")
    .data(dataset);

上記のように変更すると、うまく機能します。

于 2013-03-12T16:22:51.803 に答える