d3js直线颜色被其他线条覆盖答案

【问题标题】：d3js straight line color covered by other linesd3js直线颜色被其他线条覆盖
【发布时间】：2021-07-13 02:36:01
【问题描述】：

我正在使用d3.js绘制一个依赖图如下图所示

用户可以在图表中进行搜索，相应的行将突出显示。但是，由于线是直的，所以线的垂直部分实际上是后者的链接。让我通过两张图片来展示它。当我们在图中找到的不是根节点的最后一个子节点时，线的垂直部分不会被着色为红色，因为后面的子节点再次将其着色为灰色。

如果突出显示的节点是根节点的最后一个子节点，则结果符合我们的预期，如下所示：

那么我该怎么做才能将彩色红线放在顶层或防止它再次变成灰色？

【问题讨论】：

【解决方案1】：

我假设您正在通过数据连接中的 update 选择更新颜色，

正如 Andrew 在 cmets 中所说，您可以使用 selection.raise() 将这些节点放在前面。 SVG 元素按照您添加它们的顺序呈现，因此第 n 个子元素将位于第 n+1 个子元素的后面，因为后者呈现在前者之上。

但是，您必须小心，仅在您着色为橙色的节点中调用 raise，因为在所有正在更新的节点中调用它不会有任何效果（请记住，从橙色变为灰色也被认为是在更新）

不看你的代码，我相信我能帮你的不多

【讨论】：