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