Question

我正在使用d3.js调整以下chords example以显示组之间的关系。有人可以解释和弦在淡出之后是如何回归的。

我有兴趣将一个处理程序连接到这个以显示信息并让它在mouseout上消失。

有一个鼠标悬停处理程序，它将淡入淡出类添加到路径元素中，但是我没有看到任何删除它的代码。

<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>

尽管如此，当我鼠标离开一组时，淡出的和弦重新出现。我的问题是它是如何实现的？

为方便起见，这里有一个jsfiddle：http://jsfiddle.net/huynhjl/hxby165d/7/

我知道这个问题/答案D3.js Chord diagram - Have text appear/disappear when hovering over an arc，但我想知道原始展示是如何做到的。

Answer 1

如果您在自己的网站上使用Bootstrap，即使添加

，也可能出现同样的问题

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

这是因为Bootstrap已经有了淡入淡出类！

为了解决这个问题，我将我的D3课程改为＆＃34; fadechord＆＃34;现在有：

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

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

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

Answer 2

这种看似奇怪的行为是用css完成的。

脚本中发生的事情是当其中一个路径触发mouseover事件时，处理程序选择所有和弦，并为每个路径切换{{1} } off off或on，基于该和弦是否连接到悬停元素。

那么，如何处理fade类？查看实际隐藏元素的选择器：

fade

css规则的真正含义是：

当有＆lt; path＆gt;时

带有“fade”类的元素，它是id为“circle”的悬停元素的后代，将其“display”属性设置为“none”。

换句话说，#circle:hover path.fade { display: none; }类不会隐藏元素，除非标记为fade的{{1}}元素正在悬停。因此，当鼠标不再在该组上时，即使它们仍然具有g类，路径也会再次可见。

d3.js - 如何在mouseout事件中再次显示和弦

2 个答案: