D3 Mouseover/Mouseout冲突

Question

我在d3中遇到了mouseover和mouseout事件的问题.

我已经建立了一个区域图,在每个"数据点"我都附加了一个圆圈.这些圆圈在加载时被隐藏(通过将不透明度设置为0).然后,当您将鼠标悬停在某个区域上时,它会显示与该图层相关的圆圈.

我现在需要做到这一点,当你将鼠标悬停在圆圈上时,它会变得更大.但是,当鼠标悬停在圆圈上时,它会触发该区域的鼠标输出事件(隐藏圆圈).

是否有任何方法可以设置事件,以便mouseout事件不会触发,直到鼠标进入另一层或完全离开svg？

这是我当前的转换代码:

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);
    });

这里是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处理程序附加到绘图区域/ SVG 来解决这个问题.

在这里完成演示.