javascript - D3力图渲染节点和链接

标签 javascript svg d3.js z-index data-visualization

我使用 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/

相关文章:

java - JSVGCavas BridgeUserAgent displayError() 覆盖

javascript - 为什么圆形对象位于 SVG 容器的左上角?

svg - 在 SVG 中绘制一个空洞的形状

angularjs - 将 d3 时间线与 Angular 结合使用

javascript - d3 拖动事件在 Firefox 中不会终止

javascript - 一旦在 Angular 2 中打开,如何将焦点设置在模态元素上?

javascript - 从php数组的输​​入文件列表中删除特定文件

javascript - "chunk"参数必须是字符串类型或 Buffer 的实例

javascript - 从 javascript 更改浏览器依赖的 css 样式

javascript - 条形图在数组中的 3 个变量之间切换