Question

我的代码类似于this plunkr中的示例。我试图覆盖CSS中的“ .link”条目以下载为SVG文档。

.link {fill: none; stroke: #ccc; stroke-width: 1.5px;}

问题是，一旦这样做，链接就不会在节点扩展或折叠时被删除。

我在原始代码中注释了class属性，并在以下函数中插入了该属性：

// 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")
   ...

Eg.

或者，您也可以保留与元素关联的类，但删除与该类关联的所有css样式。无论哪种情况，您都需要像以前一样在.attr()上应用样式属性。

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

1 个答案: