覆盖 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()，就像您所做的那样。