Question

我这里有两个要素。点和标签（我使用的是D3）

当我将鼠标悬停在点元素上时，我希望它显示与该特定点相关的标签元素。当我鼠标移出时，我希望标签消失。

目前，当我鼠标悬停时，所有标签都出现（不仅仅是那个标签的标签），当我鼠标移出标签时，标签消失，但是当我第二次鼠标悬停时，标签永远不会被触发。我是初学者，所以感谢您的帮助。

points
    .attr('cx', function(d) { return scaleX(d[0]); })
    .attr('cy', function(d) { return scaleY(d[1]); })
    .attr('r', 4)
    .attr('fill', 'slateBlue')
    .on('mouseover', function() {
        d3
            .select(this)
            .attr('fill', 'hotpink');            
        labels
            .text(function(d) { return d[0] + ',' + d[1]; })
            .attr('x', function(d) { return scaleX(d[0]) + 3; })
            .attr('y', function(d) { return scaleY(d[1]) - 3; })
            .attr('font-family', 'sans-serif')
            .attr('font-size', '10px')
            .attr('fill', 'hotpink');
    })
    .on('mouseout', function(d) {
        d3
            .select(this)
            .attr('fill', 'slateBlue');
        labels
            .remove();
    });

Answer 1

当.remove（）标签时，节点将从DOM中删除。您无法再更新其text（），因为没有要更新的节点。我建议简单地：labels.attr（“display”，“none”）隐藏和labels.attr（“display”，null）来显示。

显示/隐藏基于鼠标输入/鼠标输出的D3元素

1 个答案: