問題タブ [d3-force-directed]

目的: 検索後にノードを表示エリアの中央に配置する

ユーザーがノードを名前で検索できるようにする強制有向グラフを作成しました。ノードが検索されると、選択されたノードは表示されたままになりますが、他のすべてのノードは一時的に不透明度を下げて、検索されたノードを強調表示します。ここで、検索されたノードを表示領域の中央に配置したいと思います。私は多くの方法を試みましたが、ノード ラベルを含むグラフ全体を翻訳することに失敗しました。どんな助けでも大歓迎です。

jsfiddle (注: 私のスクリプトから実行するとオートコンプリート検索は完全に機能しますが、jsfiddle では失敗するようです): https://jsfiddle.net/dereksmith5822/73j63nn0/

強制指向のグラフ ノードを折りたたもうとしていますが、以下のコードからそれを行うことができますが、直接のターゲット ノードに別のノードへの別の「エッジ」がある場合でも、これによりすべてのターゲット ノードが折りたたまれます。エッジのみを折りたたむことができるようにしたい場合、つまり、エッジを非表示にしてもターゲット ノードはまだ表示されたままです。これは、別の親ノードがまだ折りたたまれていないためです。

以下の例では、2 つの親の「子」ノードにリンクされた「孫」ノードがあります。孫にリンクされた子ノードのいずれかを折りたたむ (またはクリックする) と、孫ノードはそのリンクと共に親に折りたたまれます。 （縁）。

私がしようとしていることと、それをそのように機能させる必要があること:子ノードをクリックすると、孫ノードを折りたたむ代わりに、子ノードに直接の親があるかどうかを確認する必要があります。最初の子クリックでのみエッジを非表示にし、2 番目の子の親ノードをクリックすると、Grandchild ノードとそのエッジが折りたたまれます。

強制指向グラフを作成していますが、私が知る限り、コードは正しく記述されています。このコードを実行すると、DOM は正確に表示されます。それでも、何も表示されません。

最初の部分を機能させようとしているので、シミュレーション部分はコメントアウトされています。コメントを外すと、処理が明らかに完了していないにもかかわらず、「tick」イベントが 1 回だけ呼び出されます。JavaScript コンソールには、それを説明するものは何もありません。

完全なコードについては、http://jsfiddle.net/jarrowwx/gof5knaj/36/を参照してください。

今朝はうまくいきましたが、何かが変わり、今は何もうまくいかないようです。D3 github を確認したところ、最後のコミットは 11 日前だったようで、ライブラリの変更が原因である可能性は低いです。

誰かが前にこのようなことを経験したことがありますか? 私が間違っていることについての指針はありますか？D3 バグを発見しましたか?

の 2 つのインスタンスが必要ですd3.forceCollide()。1 つは、オーバーラップを防ぐために、すべてのノードを互いに離して配置する方法です。2 番目の方法では、ノードのサブセットのみが互いに押し離され、半径がはるかに大きくなります。

2 つ目の力を実現するために、次のように、initialize メソッドを微調整して着信ノードをフィルター処理します。

今、これはほとんど機能します。実際の動作を確認するためにフィドルを作成しました: https://jsfiddle.net/jarrowwx/0dax43ue/38/ - すべての色付きの円は、同じ色の他のすべての円を遠くから反発するはずです。他のすべての色は、ぶつかって邪魔にならないように押し出します。

物事が定義される順序を変更しない場合、選択的に適用された力は最初の色 (赤) にのみ適用されます。力を適用する前に配列をシャッフルするとdata、何が起こるかを正確に定義することは困難ですが、同じ色であっても、一部の円に力が適用され、他のほとんどの円には適用されません。

ここで何が起こっているのか、またはそれを修正する方法はありますか?

d3.js を使用して動的ネットワーク トポロジを視覚化しようとしています。これまでのところ、円をノードとして配置することで機能させることができましたが、ノード タイプごとに異なるカスタム イメージを配置する必要があります。

私の現在のコードは次のようなものです：

最初に、すべてのノードにイメージを配置して、次のようにどのように機能するかを確認したいと考えました。

リンクだけが表示され、ノードが消えただけなので、このようには機能していないようです。d3 v3 を使用した例をいくつか見つけましたが、現在は d3 v4 を使用しており、それに応じて実装したいと考えています (forceLink() が v3 に含まれていないという問題があったため)

前もって感謝します。