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

Question

我正在使用d3.js 调整以下和弦示例来显示组之间的关系.有人可以解释和弦在淡出后会如何显现.

我有兴趣将一个处理程序连接到这个以显示信息并让它在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和弦图 - 悬停在圆弧上时文本出现/消失,但我想知道原始展示是如何做到的.

Answer 1

如果您在站点上使用Bootstrap,即使添加也可能出现同样的问题

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

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

为了解决这个问题,我将我的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;
                });
            }