D3またはGraphGLライブラリを使用して力指向グラフの視覚化でノードにカーソルを合わせると、スムーズなアニメーションの拡大効果（Mac OS Xのドックと同様）を作成できますか？
ノードは、力指向のレイアウトを維持しながら、ノードの周囲の他のノードを拡張および移動する必要があります。
誰かがこれをフォークしてデモンストレーションできるとしたら、それは素晴らしいことです！ありがとう
これは、この質問のような単純なズームとは異なることに注意してください
2783 次
3 に答える
13
素晴らしい質問です。それに答えるために、魚眼歪み用のD3 プラグインを実装しました。これは、Flare と Sigma.js の以前の作業に大まかに基づいており、これらは Sarkar と Brown の作業、「Graphical Fisheye Views of Graphs」、CHI'92 に基づいています。
これは、Misérables データセットを使用した簡単なデモです。コードのソースを表示します。時間があれば今日中に記事を書きます。
注: これは静的な力のレイアウトを使用します。レイアウトは起動時に計算され、変更されません。これはおそらく魚眼の歪みと組み合わせて必要なものだと思います。そうしないと、歪みがノードを動的に移動する能力と競合します。しかし、理論的には、必要に応じてそれらを組み合わせることができます。
于 2012-04-10T16:23:46.710 に答える
2
純粋な CSS でこれを行うことができればすばらしいのですが、残念ながら、さまざまな SVG 要素 (円など) の属性は CSS 経由では到達できないようです。具体的には「半径」ですが、これは多くの SVG 要素プロパティに当てはまると思います。
しかし、d3を介して行うのはそれほど難しくありません。これが私の例 jsfiddleです。基本的に、次のことを行います。
- トランジションを使用します (これらの使用方法については、チュートリアル #2を参照してください)。基本的
d3element.transition().delay(300).attr(...)に、変更を行うには a を実行します。 - 「爆破された」円が重ならないようにするために、私ができる最善の方法は、フォース レイアウトのチャージ設定を変更することでした。円が大きいほど反発力が大きくなります。
うまくいけば、それはあなたが探しているものです...
于 2012-04-07T21:22:51.737 に答える
1
あなたがそれを受け入れるならば、純粋な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で使用されています
于 2012-04-06T20:31:38.697 に答える