8

私はD3.jsライブラリを使用しており、力指向グラフのデモを見ています:

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

ここに画像の説明を入力

ノード リンク ツリーも確認しています。

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

ここに画像の説明を入力

私がやりたいことは次のとおりです。

- 強制指向グラフから開始し、ユーザーがノードをクリックすると、選択したノードが中央にあるツリーに滑らかにアニメーション化されます。- 次に、ユーザーがキャンバス内の空白のスペースをクリックすると、強制指向グラフに戻るアニメーションが表示されます。

誰かが以前にこのようなことをしたことがありますか、または最善のアプローチについて何かアドバイスはありますか? 私は D3.js が初めてで、これがフレームワークでサポートされているかどうかもわかりません。

4

1 に答える 1

7

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

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

次に、ノード配列を反復処理し、値を設定してx、新しい値を反映させます。これにより、実行時にフォースレイアウトの現在と位置を知るようにノードが設定されますypxpyXYxyforce.start()

plotLayout()この例の関数を見てみましょう。

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

ただし、これは 2 番目の d3.layout に依存しません。遭遇する問題は、ツリー レイアウト用の階層データセットが必要なことです。これには、階層レイアウトで期待されるように、ノードとエッジのデータを node.children の配列に変換する必要があります。私が行う方法は、データセットを複製して手動で平坦化することですが、私が知らないより洗練された解決策があるかもしれません。

于 2013-05-06T21:07:26.557 に答える