我使用 d3 创建的力图有问题。我正在将使用 d3.json 检索到的数据动态添加到节点和链接数组。我的问题出现在初始渲染之后,我向它们各自的数组添加了更多节点和链接。添加的链接已呈现在节点的“顶部”。不幸的是,我的节点由图像组成,因此链接覆盖了该图像的一部分。我想出的解决方案是选择我的 svg 容器内的所有内容(节点和链接)并在每次 update() 调用时删除它们并再次重新输入每个元素。这似乎是一种低效的方法。我篡改了 z-index 但无济于事。有什么建议吗?
最佳答案
如果您始终预先添加任何链接(即在任何节点之前将链接添加到容器),则永远不会有链接与节点重叠。您可以使用 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
关于javascript - D3力图渲染节点和链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19868645/