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

D3强制图渲染节点和链接

1 个答案: