D3 Mouseover/Mouseout 冲突

Question

我在 d3 中遇到鼠标悬停和鼠标移出事件的问题。

我制作了一个面积图，并在每个 "data point" 处添加了一个圆圈。这些圆圈在加载时隐藏（通过将不透明度设置为 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

谢谢，

Answer 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 处理程序附加到绘图 area/SVG.

来解决这个问题

完成演示 here。

D3 Mouseover/Mouseout 冲突

D3 Mouseover/Mouseout Conflict

javascript

svg

d3.js