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