1

d3.layout.pack グラフの例に基づく再利用可能なモジュールがあります。

ノード要素の終了時にトランジションを追加しましたが、トランジションは 1 つのデータ セットに対してのみ機能し、他のデータ セットに対しては機能していないようです。

基本的に、データ更新をシミュレートするために、次のsetInterval方法で関数を呼び出しています。

 function test(){
     d3.select('#vis')
     .datum(data2)
     .call(cluster);
 }

 setInterval(test, 1500);

...そして、このようにトランジションを追加しました:

 c.exit().transition()
     .duration(700)
     .attr("r", function(d){ return 0; })
     .remove();

ファイルの下部にデータ更新セクションがあり、431 行目に終了遷移処理があります。

何が問題なのか確認していただけますか？

4

1 に答える 1

2

表示されている動作は、D3 でのデータの照合方法が原因です。データセットの 1 つで、すべてのデータ要素が既存の DOM 要素と一致するため、exit選択は空です。既存の要素の位置やサイズなどを更新しているだけです。

これを「修正」する方法は、データを一致させる方法を明示的に D3 に伝えることです。たとえば、424 行目を次のように変更します。

.data(nodes, function(d) { return d.name; });

を比較してname、データ要素が DOM 要素で表されているかどうかを判断します。ここでjsfiddleを変更しました。

于 2013-11-06T16:17:30.407 に答える