D3 / Graphgl力向けネットワーク可視化の拡大鏡効果

Question

は、D3またはGraphGLライブラリを使用して、力方向グラフの視覚化でノードを介してホバリングするときに、滑らかなアニメーション拡大効果（Mac OS X上のドックと同様）を作成することが可能ですか？

力指向レイアウトを維持しながら、ノードはその周囲の他の周囲を拡大して変位させる必要があります。

誰かが forkこのを実証することができます。ありがとう

注意、これはこの質問

Answer 1

素晴らしい質問。それに答えるために、私は d3 plugin for Fisheye Distortion 。それはFlareとSigma.jsの以前の仕事に大別されています。 NOFOLLOW NOREFERRER「グラフのグラフの魚眼レンズ」、CHI'92。

これはa MiséRablesデータセットのQuick Demo 。コードのソースを表示します。私が時間があるとき、今日は後で書いています。

注：これは静的な力のレイアウトを使用します。レイアウトは起動時に計算され、変更されません。私はこれがおそらくあなたが魚眼レンズの歪みと組み合わせて欲しいものであると思います。しかし理論的には、それがあなたが望むものであるならば、それらを組み合わせることは可能です。

Answer 2

あなたが純粋なCSSでこれを行うことができれば素晴らしいですが、残念ながらそれはさまざまなSVG要素の属性（つまり、円）のように見えます（つぶし）。具体的には「半径」ですが、これはSVG要素の特性の全スルーが当てはまります。

しかし、D3を介して行うのは超難しくありません。これはマイ例jsfiddle 。基本的にあなたは次のことを行います：

1. 遷移を使用する（チュートリアル＃2 の使用方法を学ぶこれら）。基本的に変更を起こすようにd3element.transition().delay(300).attr(...)を実行します。
2. 「吹き飛ばし」サークルを重ね合わせて保持するために、私はフォースレイアウトの充電設定。円が大きいと反発力を増やす。

   うまくいけば、あなたが探しているものを...

Answer 3

純粋なCSSはそれを受け入れるとこれを行うことができます。

.app{
-webkit-transition-property:-webkit-transform;
-moz-transition-property:-moz-transform;
-transition-property:-transform;
-webkit-transition-duration:.15s;
-moz-transition-duration:.15s;
-transition-duration:.15s;
}

.app:hover{
-webkit-transform:scaleX(1.2) scaleY(1.2);
-moz-transform:scaleX(1.2) scaleY(1.2);
-transform:scaleX(1.2) scaleY(1.2);
}

.

私のホームページで使われています tuoxie.me