仅在悬停时显示d3节点文本 [英] Show d3 node text only on hover

问题描述

我只想在鼠标悬停时显示节点文本。当我鼠标移过节点时，我有svg圆的不透明度改变，但只有第一个节点的文本显示。我已经弄清楚，这是因为我如何使用select元素，但我不知道如何拉我正在悬停的节点的正确文本。这是我目前有的。

I'm trying to only show the node text on mouseover. When I mouseover the node, I have the opacity for the svg circle changing, but only the text for the first node showing up. I've figured out that this is because of how I'm using the select element, but I can't figure out how to pull the correct text for the node that I'm hovering on. Here's what I currently have.

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

推荐答案

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

If you use d3.select you're searching the entire DOM for <text> elements and selecting the first one. To select specific text nodes you either need a more specific selector (e.g. #textnode1) or you need to use a subselection to constrain the selection under a particular parent node. For example, if the <text> element lived directly under the node in your example you could use:

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

这篇关于仅在悬停时显示d3节点文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！