Подтвердить что ты не робот

Показать d3 node текст только при наведении

Я пытаюсь показать только текст node при наведении курсора мыши. Когда я навешиваю на кнопку node, у меня есть непрозрачность для изменения круга SVG, но появляется только текст для первого node. Я понял, что это из-за того, как я использую элемент select, но я не могу понять, как вытащить правильный текст для node, на котором я паря. Вот что я сейчас имею.

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

Ответ 1

Если вы используете d3.select, вы просматриваете все элементы DOM для элементов <text> и выбираете первый. Чтобы выбрать определенные текстовые узлы, вам нужен либо более конкретный селектор (например, #textnode1), либо вам нужно использовать подсегмент, чтобы ограничить выделение под определенным родителем node. Например, если элемент <text> жил непосредственно под node в вашем примере, вы можете использовать:

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