javascript - D3 フォース グラフ レンダリング ノードとリンク

Question

d3 を使用して作成したフォース グラフに問題があります。d3.json を使用して取得したデータを、ノードとリンクの配列に動的に追加しています。私の問題は最初のレンダリングの後に発生し、ノードとリンクをそれぞれの配列に追加します。追加されたリンクは、ノードの「上」にレンダリングされています。残念ながら、私のノードは画像で構成されているため、リンクはその画像の一部をカバーしています。私が思いついた解決策は、svg コンテナー内のすべて (ノードとリンク) を選択し、 update() 呼び出しごとにそれらを削除し、各要素を再度入力することです。これは非効率な方法のように思えます。z-index を改ざんしましたが、役に立ちませんでした。何か提案はありますか？

Answer 1

リンクを常にプリペンドする (つまり、ノードの前にコンテナにリンクを追加する) 場合、リンクがノードに重なることはありません。insert()これは、保持したいノードに一致するセレクターを指定する限り先頭に追加されます。

forceContainer.selectAll('.node').data(force.nodes())
forceContainer.enter()
  .append('div')
  .attr('class', 'node')

forceContainer.selectAll('.link').data(force.links())
forceContainer.enter()
  .insert('div', '.node') // Inserts link before any of the existing nodes