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

Question

我有与这个plunkr中的示例类似的代码。我正试图推翻"；。链接"；在CSS中输入以作为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")
...

例如。

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