覆盖 CSS 会导致 D3JS 树路径链接在节点展开或折叠后可见

Question

我的代码类似于此 plunkr中的示例。我试图覆盖 CSS 中的“.link”条目以下载为 SVG 文档。.link {fill: none; stroke: #ccc; stroke-width: 1.5px;}问题是，一旦我这样做，链接就不会在节点扩展或折叠时被删除。我在原始代码中注释了类属性，并在以下函数中插入了属性：// Update the linksâ¦var link = svg.selectAll("path.link")   .data(links, function (d) {      return d.target.id;});// Enter any new links at the parent's previous position.link.enter().append("path", "g")   //.attr("class", "link")   .attr("stroke", "#ccc")   .attr("fill", "none")   .attr("stroke-width", "2px")   .attr("x", boxWidth )   .attr("y", boxHeight)   .attr("d", function (d) {     console.log(source)   var o = {       x: source.x0,       y: source.y0   };   return diagonal({       source: o,       target: o   });});关于为什么会发生这种行为的任何见解？

Answer 1

您的原始代码是：

var link = svg.selectAll("path.link")
  ...

link.enter()
  .append("path")
  .attr("class","link")
  ...

如果删除附加项目的类，则每次绘制树时，第一个选择 ( link) 将为空（因为没有类链接的路径）。因此，将输入数据数组中的任何链接。这就是代码最初按预期工作的原因。但是，不会更新或退出任何链接，因为选择中没有要更新或退出的元素 - 选择将始终为空。

如果这些是您唯一的路径，您可以将选择器更改为：

 var link = svg.selectAll("path")
   ...

例如。

或者，您可以保留与元素关联的类，但删除与该类关联的任何 css 样式。在任何一种情况下，您都可以应用样式属性.attr()，就像您所做的那样。