問題タブ [force-layout]

D3で力指向グラフに取り組んでいます。他のすべてのノードとリンクを不透明度を低く設定して、マウスオーバーしたノード、そのリンク、およびその子ノードを強調表示したいと思います。

この例、http：//jsfiddle.net/xReHA/では、すべてのリンクとノードをフェードアウトしてから、接続されたリンクをフェードインすることができますが、これまでのところ、エレガントにフェードインすることはできませんでした。現在マウスオーバーされたノードの子である接続されたノード。

これは、コードの主要な機能です。

Uncaught TypeError: Cannot call method 'setProperty' of undefinedsource.targetからロードした要素に不透明度を設定しようとすると、エラーが発生します。これはそのノードをd3オブジェクトとしてロードする正しい方法ではないと思いますが、リンクのターゲットまたはソースに一致するノードを見つけるためにすべてのノードを再度繰り返すことなく、ノードをロードする別の方法を見つけることはできません。パフォーマンスを合理的に保つために、必要以上にすべてのノードを反復処理したくありません。

http://mbostock.github.com/d3/ex/chord.htmlからのリンクをフェードする例を取り上げました。

ただし、接続されている子ノードを変更する方法は示されていません。

これを解決または改善する方法についての良い提案は、猛烈に賛成されます:)

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

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

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

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

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

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

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

D3またはGraphGLライブラリを使用して力指向グラフの視覚化でノードにカーソルを合わせると、スムーズなアニメーションの拡大効果（Mac OS Xのドックと同様）を作成できますか？

ノードは、力指向のレイアウトを維持しながら、ノードの周囲の他のノードを拡張および移動する必要があります。

誰かがこれをフォークしてデモンストレーションできるとしたら、それは素晴らしいことです！ありがとう

これは、この質問のような単純なズームとは異なることに注意してください

強制レイアウトで無向グラフを作成する作業を行っています。さらに、クリックイベントで各円（ノード）の色を変更しようとしています。サークル要素にそのようなイベントを追加するアイデアはありますか? このコードを試してみましたが、機能していません。

次のような力のレイアウトグラフにノードを追加しています。

複合SVG要素をノードとして追加する方法はありますか？つまり、各円にハイパーリンクを追加したいので、次のようなものが必要になります。

<a href="whatever.com"><circle ...></circle></a>

d3.js layout.force を使用して、div のような非 SVG 要素を (再) 配置できますか?

div がsvg 要素に使用される属性と同等のものとして使用できる可能性がありますposition: absolute;か?lefttopx1y1

目標は、IE8 をサポートするイメージとメニュー項目に力の効果を持たせることです。svg ノードが画像になる可能性があることは承知していますが、IE8 をサポートする必要があるため、これはオプションではありません。

不可能な場合、 svgweb をd3.jsと一緒に使用することは、この目的のための安定したオプションですか?

ありがとう！

**アップデート**

D3かっこいい！！私はそれのコツをつかみ始めています.divのような通常のhtml要素で「力d3.layout.force()」を使用することは確かに可能です.欲しいです。
すなわち:

うまく動作します！

でドラッグすると.call(force.drag);問題が発生します（予想どおり）。

火炎虫:

ただし、修正可能なはずです。

私は現在d3.jsを使い始めました。ノードをグループ化して、強制有向グラフで異なる色を与える方法は? 例: 親ノードの色は赤、子ノードの色は青です。

D3.js を使用して強制指向レイアウトを試しています。私が必要とするのは、ルート（または他の選択されたノード）によってレイアウトを中央に配置し、ティック関数が完了した後（グラフのアルファが低い）、このノードをsvg（キャンバスなど）の中央に戻すことです。出来ますか？で例を見つけました

http://bl.ocks.org/1080941

しかし、ルート（aplhaまたは他のカスタムティック関数計算を使用する場合）を中央に戻すことができません（この特定のノードによってレイアウトを中央に配置します）。

どんな助けでも大歓迎です。

「ノード」と「ライン」を使用したD3セットアップがあります。グラフが最初に表示されるとき、グラフは中央に落ち着くまで重力で跳ね返ります。「バウンス」のような効果なしに、中央に自動的に表示されるようにする方法を知っている人はいますか？

PS私は力のレイアウトを使用しています

スタック オーバーフローに関する最初の質問です。私は d3.js を初めて使用しますが、他の人が d3.js を使用して達成できることに常に驚かされてきました...そして、私自身が d3.js を使用して達成できた進歩がいかに少ないかにもほぼ同じくらい驚いています! 明らかに私は何かを食べているわけではないので、ここの親切な魂が私に光を見せてくれることを願っています.

私の意図は、単純に次のことを行う再利用可能な JavaScript 関数を作成することです。

• 指定された DOM 要素に空白の強制有向グラフを作成します
• ラベル付けされた画像を含むノードをそのグラフに追加および削除し、ノード間の接続を指定できます

http://bl.ocks.org/950642を出発点として取り上げました。これは基本的に、作成できるようにしたいレイアウトの種類であるためです。

私のコードは次のようになります。

新しいノードを追加するたびに、既存のすべてのノードのラベルが付け直されます。これらが重なり合い、物事が醜くなり始めます。これがなぜなのか理解できupdate()ます。新しいノードを追加するときに関数 functionを呼び出すと、node.append(...)データセット全体に対して a が実行されるためです。追加しているノードに対してのみこれを行う方法がわかりません...そして、明らかnode.enter()に単一の新しい要素を作成するためにしか使用できないため、ノードにバインドする必要がある追加の要素では機能しません. どうすればこれを修正できますか?

この問題のいずれかで提供できるガイダンスをありがとうございます!

以前に言及された他のいくつかのバグのソースをすばやく修正したため、編集されました