問題タブ [force-layout]

d3 を使用して、関連オブジェクトのインタラクティブな強制指向ツリーを作成しました。ノードとリンクは、d3 ツリー レイアウトを使用して作成されます。

データ構造は次のとおりです。

ノード/リンクは次の方法で作成されます。

ツリーの双方向トラバーサルを有効にするために、新しく作成されたすべてのノードからツリーを再帰的にたどり、すべてのノードに親参照を追加します。

リーフ ノードをクリックすると、ツリーを拡張できます。次に、データが AJAX 経由で読み込まれ、ツリーが更新されます。

これに関する問題は、同じ ID/名前を持つオブジェクトがツリー内で複数回発生する可能性があることです。JavaScriptコードからすべての重複ノード(クロスリンクのためにツリーをグラフに変換する)をきれいにマージする方法はありますか?

編集:これを行う唯一の方法は、ツリー全体をたどって、複製を指すすべてのリンクを再リンクすることです...これにより、スクリプトの速度が大幅に低下する可能性があると思いますが...

私は初心者なので、D3.js に関する別の質問があります。

多くの人が行ったように、力有向グラフを作成しました。

すべてのノードが 1 つの配列に格納され、すべてのリンクが別の配列に格納されます。

ここで、中央ノードを svg の真ん中に固定し、他のノードをその周りに配置したいと考えています。

ネットから落ちることなく、強制レイアウトからノードを 1 つだけ切り取る可能性はありますか? もう作った人いますか？

ここに示されているとおりに d3.js を使用しますが、データ値が異なります。

グラフが最初に表示されると、すべての要素が散在し、約 1 秒間、その位置に向かって急速に移動します。これはサンプルでは見栄えがしますが、私のデータではあまり見栄えがよくありません。ノードが指定された場所で開始するようにオフにする方法はありますか? このエントリの視覚化をカスタマイズする方法はありますか?

私は d3.js から始めています。マウスが力指向グラフのノード上にあるときに、テキスト (ツールチップ) を含むボックスを表示する最も簡単な方法を知りたいです。さらに、このボックスに含まれるテキストは、ノードごとにカスタムにする必要があります (のようなものfunction(d){return d.fullName;})) 。

ここに私が今持っているもののサンプルコードがあります。

前もって感謝します

d3 フォース有向グラフでほろ酔いを使用すると、問題が発生します。ほろ酔い重力を西に設定すると、円の左上隅からほろ酔いが始まります。円の右側から開始するにはどうすればよいですか?

d3 で使用するコードのサンプルを次に示します。

編集この質問で: https://stackoverflow.com/a/10806220/1041692彼らは次のように言います:

実際の円でオーバーレイする svg:g にツールチップを追加してみることができますが、幅と高さはゼロです。現在、境界ボックスを取り、ツールチップを端に配置しています。ほろ酔いのオプションで遊ぶことも役立つかもしれません。

しかし、私が間違っているか、うまくいかないかのどちらかで、問題は解決しませんでした。

EDIT 2この問題はブラウザにも依存します。クロムでは、ほろ酔い要素が円の左上隅に取り付けられていますが、円の右側の中央に取り付けたいと思います。Firefox では、ほろ酔いが Web ページ全体の左上に表示されます。

D3.jsを使用して階層的な力の図を生成したいと思います。これは、グラフを子レベル（子間の関係が表示されている）に展開するノードをクリックすることでツリーのような構造をナビゲートできる力指向グラフです。ノードは、親または兄弟の2つの方法で相互に関連付けることができます。親の関係は、ノードがその親に「属している」ことを示します。

出発点として、フォースクラスターの例（https://github.com/mbostock/d3/blob/master/examples/force/force-cluster.html）を確認し、上記の関係を含めましたが、理解できません。ネットワーク全体ではなく、拡張されたクラスターのみをレンダリングする方法を説明します（下の画像を参照）。

上：力の図。赤いリンクは兄弟関係を示しています。

親の「type」を使用する代わりに、JSONで「children」を子として配置することもできます。

ただし、子ノード間の関係を追跡しながら、ツリー構造をどのように組み合わせるのですか？

想像上の木のような構造は次のようになります。

下のセクションは、ビジュアルの望ましいレイアウトを示しています（上の画像と同様の機能）。

進め方について何か提案はありますか？

d3の力のレイアウトを使用して、たとえば、円といくつかのテキストのSVGグループとしてノードを追加できます。

ただし、ノードデータに応じて、オプションでグループに別の要素を追加したいので、このノードのデータに「image」属性が含まれている場合は、新しい子要素（svg：image）を追加します。 ）。svg：imageをすべてのノードに追加するのは簡単です（上記の円とテキストを実行したのと同じように追加します）。また、作成済みの要素の属性を動的に変更することも簡単です（上記のように、属性の値として関数を使用することによりtext）。データに属性が含まれている場合にのみsvg:image、子要素を追加する方法がわかりません。これを達成するための最良の方法は何ですか？image

接続されたノード グラフを描画するために d3 強制指向レイアウトを使用しています。ノード数が変わるたびにグラフ全体を小さく表示したい。このために、SVG の scale プロパティを使用しています。ただし、グラフの位置を固定することはできません。

以下は私が使用しているコードです：

svg --> グラフを保持するメインの SVG 要素です
bh --> SVG 要素の
直径の幅と高さ --> フォース グラフです