次のようなD3グラフを作成したいと思います。
HTML ページが読み込まれると、固定された場所に 1 つのノードが表示されます。左上としましょう。これをテンプレート ノードと呼びましょう。このノードは移動できません。
ユーザーがテンプレート ノードをマウス ダウンすると、テンプレート ノードと同じ場所に新しいノードが作成され、ユーザーは新しいノードを必要な場所にドラッグできるはずです。新しいノードは、ユーザーが移動した場所に正確に残る必要があります。
ユーザーはいつでもノードを移動できる必要があります。ここでも、ノードはユーザーが離れた場所に留まる必要があります。
ユーザーは、任意の 2 つのノード間にリンクを描画できる必要があります。ctrl キーを押さずに 1 つのノードから別のノードにドラッグするとリンクが描画され、control キーを押しながらドラッグするとノードが移動するとします。
2 つのノード間にリンクが描かれている場合、ノードは位置を変更してはなりません。
2 つのノードがリンクされており、そのうちの 1 つをドラッグして移動すると、必要に応じてリンクのサイズと方向が変更されます。
強制レイアウトを使用しています。
テンプレート ノードを作成することはできますが、常にコンテナーの中心に移動します。これは、コンテナーの中心が重心であるためだと思います。しかし、コードを介してその位置を左上に固定する方法がわかりません。
リンクと新しいノードを作成できます。ただし、ノードは移動し、リンクのサイズは変更されます。これは、フォース レイアウトがリンクの長さをフォース レイアウトのリンク距離と等しくしようとするためである可能性があります。しかし、リンク距離の関数を使用する方法がわかりませんか? それが本当に役立つかどうかさえわかりません。
では、どのような方法を使用すればよいでしょうか? 何か案が？