javascript - 可折叠树布局中的 d3js 路径生成器

Question

我一直在学习 d3js 并且有这个问题，我几乎无法在网上找到一个很好的参考：

在此演示代码中：

可折叠树http://bl.ocks.org/mbostock/4339083

我发现下面的片段对于节点的折叠/展开行为至关重要：

  // Update the links…
  var link = svg.selectAll("path.link")
  .data(links, function(d) { return d.target.id; });

谁能解释一下为什么必须在此处使用 d.target.id 设置数据？或者如果有人可以将我重定向到解释的参考，非常感谢。

Answer 1

to 的第二个参数.data()是一个函数，它告诉 D3 如何将数据元素与 DOM 元素匹配。默认情况下，它通过索引执行此操作，即第一个数据项匹配第一个 DOM 元素，第二个匹配第二个，依此类推。在这种情况下，这不起作用，因为数据需要与目标 ID（或唯一标识链接的类似内容）匹配。

有关详细信息，请参阅文档。