d3.js-和弦如何在mouseout事件中再次可见

我正在使用d3.js修改以下内容，以显示组之间的关系。有人能解释一下和弦在消失后是如何恢复的吗

我感兴趣的是将一个处理程序连接到这个程序中以显示信息，并让它在mouseout上消失

有一个mouseover处理程序向path元素添加了一个淡入淡出类，但我没有看到任何删除它的代码

<path class="chord fade" d=<elided> style="fill: rgb(247, 129, 191);">
    <title>Financial District → Western Addition: 1.1%Western Addition → Financial District: 1.1%</title>
</path>

金融区→ 西药添加量：西药添加量的1.1%→ 金融区：1.1%

尽管如此，当我将鼠标移出一组时，消失的和弦再次出现。我的问题是它是如何实现的

为方便起见，这里提供了一个JSFIDLE：

---

我知道这个问题/答案，但我想知道最初的showcase是如何做到的。

这个看似奇怪的行为是通过css实现的

脚本中发生的情况是，当其中一个路径触发

mouseover

事件时，处理程序选择所有和弦，并根据和弦是否连接到悬停元素，为每个和弦关闭或打开

fade

类

那么，

fade

类是如何处理的呢？检出实际隐藏元素的选择器：

#circle:hover path.fade {
    display: none;
}

css规则的真正含义是：

如果有一个元素的类为“淡入淡出”，它是id为“圆圈”的悬停元素的后代，请将其“显示”属性设置为“无”

---

换句话说，

fade

类不会隐藏元素，除非id为

#circle

的

g

元素处于悬停状态。因此，当鼠标不再位于该组上时，路径将再次可见，即使它们仍然具有

淡入

类。

这一看似奇怪的行为是通过css实现的

脚本中发生的情况是，当其中一个路径触发

mouseover

事件时，处理程序选择所有和弦，并根据和弦是否连接到悬停元素，为每个和弦关闭或打开

fade

类

那么，

fade

类是如何处理的呢？检出实际隐藏元素的选择器：

#circle:hover path.fade {
    display: none;
}

css规则的真正含义是：

如果有一个元素的类为“淡入淡出”，它是id为“圆圈”的悬停元素的后代，请将其“显示”属性设置为“无”

---

换句话说，

fade

类不会隐藏元素，除非id为

#circle

的

g

元素处于悬停状态。因此，当鼠标不再位于该组上时，路径将再次可见，即使它们仍然具有

淡入

类。

如果您在站点上使用引导，则即使添加

#circle:hover path.fade {
  display:none;
}

这是由于引导已经有一个淡入淡出类

为了解决这个问题，我将我的D3类更改为“fadechord”，现在有：

#circle:hover path.fadechord {
  display:none;
}

然后在鼠标悬停侦听器中，我有：

            function mouseover(d, i) {
                chord.classed("fadechord", function(p) {
                    return p.source.index != i
                            && p.target.index != i;
                });
            }

---

如果您在站点上使用引导，那么即使添加

#circle:hover path.fade {
  display:none;
}

这是由于引导已经有一个淡入淡出类

为了解决这个问题，我将我的D3类更改为“fadechord”，现在有：

#circle:hover path.fadechord {
  display:none;
}

然后在鼠标悬停侦听器中，我有：

            function mouseover(d, i) {
                chord.classed("fadechord", function(p) {
                    return p.source.index != i
                            && p.target.index != i;
                });
            }

---

杰出的费了好大劲，这个解决方案为我节省了不少时间！格雷西亚斯！非常感谢你！只需更改类名就可以了！我完全不知道为什么它没有做我想让它做的事情：）谢谢！多谢达伦！杰出的费了好大劲，这个解决方案为我节省了不少时间！格雷西亚斯！非常感谢你！只需更改类名就可以了！我完全不知道为什么它没有做我想让它做的事情：）谢谢！多谢达伦！