D3 鼠标悬停/鼠标悬停冲突答案

【问题标题】：D3 Mouseover/Mouseout ConflictD3 鼠标悬停/鼠标悬停冲突
【发布时间】：2015-04-22 10:40:51
【问题描述】：

我在 d3 中遇到了 mouseover 和 mouseout 事件。

我已经建立了一个面积图，并在每个“数据点”处添加了一个圆圈。这些圆圈在加载时被隐藏（通过将不透明度设置为 0）。然后，当您将鼠标悬停在某个区域上时，它会显示与该图层相关的圆圈。

我现在需要做的是，当你将鼠标悬停在一个圆圈上时，它会变大一点。但是，当鼠标悬停在圆圈上时，它会触发该区域的 mouseout 事件（隐藏圆圈）。

有什么方法可以设置事件，以便在鼠标进入另一层或完全离开 svg 之前不会触发 mouseout 事件？

这是我拥有的当前转换代码：

var svg = d3.select('svg');

svg.selectAll('.data-circles')
    .attr('opacity', 0);

svg.selectAll('.layer')
    .attr('opacity', 1)
    .on('mouseover', function (d, i) {
        svg.selectAll('.data-circles')
            .transition()
            .duration(250)
            .attr('opacity', function (d, j) {
                return j == i ? 1 : 0;
            });
    }).on('mouseout', function (d, i) {
        console.log(d, i);
        svg.selectAll('.data-circles')
            .transition()
            .duration(250)
            .attr('opacity', 0);
    });

    var dataCircle = svg.selectAll('.data-circle');

    dataCircle.on('mouseover', function (d, i) {
        d3.select(this)
            .transition()
            .duration(500)
            .attr('r', 8)
            .attr('stroke-width', 4);
    }).on('mouseout', function () {
        d3.select(this)
            .transition()
            .duration(500)
            .attr('r', 4)
            .attr('stroke-width', 2);
    });

And here is a link to the code on Jsfiddle

谢谢，

【问题讨论】：

标签： javascript svg d3.js

【解决方案1】：

您可以简单地删除 mouseout 处理程序（并将 mouseover 重命名为 mouseenter 以提高效率）：

.on('mouseenter', function (d, i) {
        svg.selectAll('.data-circles')
            .transition()
            .duration(250)
            .attr('opacity', function (d, j) {
                return j == i ? 1 : 0;
            });
    });

这将为正确的圆圈设置正确的不透明度，并且不会干扰单个圆圈的突出显示。与您之前的交互模型的不同之处在于，即使光标离开绘图区域，圆圈仍然存在 - 您可以通过将 mouseout 处理程序附加到绘图区域/SVG 来解决这个问题。

完整的演示here。

【讨论】：