Question

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

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

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

是否有任何方法可以设置事件，以便在鼠标进入另一层或完全离开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处理程序附加到绘图区域/ SVG来解决此问题。

完整演示here。

D3 Mouseover / Mouseout冲突

1 个答案: