Javascript D3力图渲染节点和链接

我使用d3创建的力图有问题。我正在使用使用d3.json检索的数据动态地添加到节点和链接数组中。我的问题出现在初始渲染之后，我将更多节点和链接添加到它们各自的数组中。添加的链接已呈现在节点的“顶部”。不幸的是，我的节点由图像组成，因此链接覆盖了该图像的一部分。我提出的解决方案是选择svg容器中的所有内容（节点和链接），并在每次update（）调用中删除它们，然后重新输入每个元素。这似乎是一种低效的方式。我已经篡改了z索引，但没有用。有什么建议吗

如果您总是预先添加任何链接（即在任何节点之前将链接添加到容器中），则永远不会有与节点重叠的链接。您可以使用

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

---

添加链接时使用

insert（）

方法–而不是

append（）

（您将继续用于节点）。我尝试了append和insert，两者都没有区别。我知道问题是我正在使用in.data（）中的identity函数来识别已经存在的节点和链接。因为它们已经存在，所以新的会被“附加或插入”，因为它们是在原始文件之后创建的，所以会在上面渲染。除了选择所有节点和链接并在再次渲染之前删除它们之外，我不知道这个问题的解决方法。我不明白为什么

insert（）

不起作用——尽管您解释说，随着时间的推移，无论是否使用

data（）

键的标识函数，您都会添加新节点。我用代码创建了一个答案。在重新阅读API并考虑到您所说的内容后，我让它工作了。我最后在enter（）链接中添加了.insert（“line”、“image”）。非常感谢您的帮助。的第二个参数。insert也为我修复了它。我使用了。插入（“行”，“第一个孩子”）