問題タブ [d3-force-directed]

d3 フォース sim があり、次のようにノードを追加する場合:

すべて正常に動作します - 円が正しい場所に追加され、レンダリングされた html は次のようになります。

JSfiddle の例

しかし、グループを追加したい場合 (私の最終的なデザインには、背景画像、ラベル、およびあらゆる種類の追加要素が必要です) のように:

私のコードは正しく解釈されているように見えますが (グループを追加し、画像とラベルを追加します)、グループは静的なままで、sim の真ん中に重なり合ったままです。また、座標変換はグループではなく画像に行われるようです。これがシムを壊していると思います：

JSfiddle の例

グループを使用するとすべてが台無しになることはかなり確信していますが、グループを適切に使用する方法について頭を悩ませることはできません。

どんな助けにも感謝します。

スニペット形式での完全な強制レイアウトは次のとおりです。

この質問は、移動 d3 円を中心円から遠ざける -ノード N1 のサイズが変更され、ノードでシミュレーションを実行すると、N1 の周りのノードが同じ角度で移動するレイアウトを強制するに基づいていますが、私がここに持っている質問ノードのサイズが元に戻ったときに、ノードを N1 に近づけることです。どうすればそれを達成できますか？

以下で使用しましたが、ノードが近づいていません

また、フォース シミュレーションを試してみると、他のノードの位置が完全に変化しています。こちらのビデオをご覧くださいhttp://recordit.co/797i1E8ocT

前もって感謝します。

次のリンクからコードをダウンロードしました

https://medium.com/netscape/visualizing-data-with-angular-and-d3-209dde784aeb

からテーマをダウンロードしました

https://github.com/akveo/ngx-admin

angular v6を使用して、両方を単一のプロジェクトに統合することができました。ここで、新しいコンポーネントを作成し、中規模サイトのグラフ コンポーネントを使用しました。M または F を示す「性別」としてノードにプロパティを追加しました。これで、画面の右側にパネルが表示されます。男性チェック ボックスをクリックすると、性別 M のノードが強調表示され、F を選択すると女性が強調表示されます。チェックボックスの選択を解除するには、ノードを反転させます。

ダッシュボード Component.ts :

ダッシュボード Component.html

ダッシュボード コンポーネント.scss

現在、時々動作しますが、一貫性がありません。多分私は何かが欠けています。どうすればこれを理解できますか？