D3.js - 力の有向グラフとノードリンクツリーの間でアニメートすることはできますか？

Question

私はD3.jsライブラリを使用して力有向グラフのデモで探しています：私はまた、ノードリンクツリーで探しています

http://mbostock.github.com/d3/ex/force.html

：

http://mbostock.github.com/d3/ex/tree.html

私がやりたい何

は次のとおりです。

- 力 - 有向グラフで起動し、ユーザーが ノード上でクリックしたとき、それは中央に選択したノード で、ツリーにスムーズにアニメーションしています。 - 次に、ユーザーがキャンバス内の空きスペースをクリックすると、 は強制的なグラフにアニメーション表示されます。

これまで誰もこのようなことをやったことがありますか？私はD3.jsが新しく、これがフレームワークでもサポートされているのかどうかはわかりません。

Answer 1

あなたがする必要があるのは、強制を停止し、既存のノードの変形を他のレイアウトから派生したx-yに適用することです。だからあなたの関数は次のようになります。

force.stop(); 
d3.selectAll("g.nodes").transtion().duration(500) 
    .attr("translate","transform("+newLayoutX+","+newLayoutY+")" 

その後、あなたのノードの配列を反復処理し、新しいXとYを反映するためにx、y、px、py値を設定します。これにはない

https://gist.github.com/emeeks/4588962

：これは、あなたがforce.start()

を実行するときは、この例ではplotLayout()機能を見てみることができます力のレイアウトのための現在のxとy位置を知るために、あなたのノードを設定しますしかし、2番目のd3.layoutに依存しています。問題は、ツリーレイアウトの階層データセットが必要なことです。階層レイアウトでは、ノードとエッジのデータをnode.childrenの配列に変換する必要があります。私が行う方法は、データセットを複製し、それを手動で平坦化することですが、私が気付いていないより洗練されたソリューションがあるかもしれません。