最初にいくつかのノードで表示される D3 フォース有向グラフがあります。各ノードには、グラフをさらに展開し、クリックされたノードにノードとリンクを動的に追加するクリック ハンドラがあります。各ノードには、SVG の長方形の形状もあります。新しいリンクとノードが既存のグラフに追加されるため、SVG は「ペインター」モデルであるため、リンクはクリックされたノードの上に表示されます。そこで、d3.selectAll().filter().sort() を使用して DOM ノードを正しい順序に並べます。これは、有向グラフでノードとリンクが誤って配置されていることを除いて機能します。sort() を使用するだけでなく、force.nodes() と force.links() データを同期させる方法はありますか?
更新: jsfiddle を作成して、これが起こっていることを示します。数回クリックして新しいノードを作成すると、リンクが不安定になります。「reorder_nodes_and_links()」の呼び出しがコメント化されている場合、グラフは安定していますが、DOM の順序により、リンクはノードの上にレンダリングされます。