仅在悬停时显示 d3 节点文本

Posted 2023-02-22

【中文标题】仅在悬停时显示 d3 节点文本

【英文标题】：Show d3 node text only on hover

【发布时间】：2013-08-08 07:50:24

【问题描述】：

我试图只在鼠标悬停时显示节点文本。当我将鼠标悬停在节点上时，svg 圆圈的不透明度会发生变化，但只显示第一个节点的文本。我发现这是因为我使用 select 元素的方式，但我不知道如何为我悬停的节点提取正确的文本。这是我目前拥有的。

node.append("svg:circle")
    .attr("r", function(d)  return radius_scale(parseInt(d.size)); )
    .attr("fill", function(d)  return d.fill; )
    .attr("stroke", function(d)  return d.stroke; )
    .on('mouseover', function(d)
        d3.select(this).style(opacity:'0.8')
        d3.select("text").style(opacity:'1.0');
                )
    .on('mouseout', function(d)
      d3.select(this).style(opacity:'0.0',)
      d3.select("text").style(opacity:'0.0');
    )
    .call(force.drag);  

【问题讨论】：

您也可以只使用一个文本框，当您将鼠标悬停在点上时将其移动到正确的位置。

【参考方案1】：

如果您使用d3.select，您将在整个DOM 中搜索<text> 元素并选择第一个。要选择特定的文本节点，您要么需要更具体的选择器（例如#textnode1），要么需要使用子选择来限制特定父节点下的选择。例如，如果 <text> 元素直接位于示例中的节点下，您可以使用：

.on('mouseover', function(d)
    var nodeSelection = d3.select(this).style(opacity:'0.8');
    nodeSelection.select("text").style(opacity:'1.0');
)

【讨论】：

文本元素位于节点本身之下，因此我能够使用您为节点本身的鼠标悬停和鼠标移出提供的代码使其工作。