Pokaż tekst węzła D3 po najechaniu myszą

Question

Próbuję wyświetlić tekst węzła po najechaniu myszą. Kiedy najecham na ten węzeł, mam nieprzezroczystość dla zmieniającego się koła svg, ale pojawia się tylko tekst pierwszego węzła. Stwierdziłem, że dzieje się tak ze względu na sposób, w jaki używam elementu select, ale nie mogę dowiedzieć się, jak wyciągnąć poprawny tekst dla węzła, na którym się unoszą. Oto, co mam obecnie.

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

Answer 1

Jeśli używasz d3.select szukasz całą Dom na <text> elementów i wybranie pierwszego. Aby wybrać określone węzły tekstowe, potrzebujesz bardziej szczegółowego selektora (np. #textnode1) lub musisz użyć podseleksu, aby ograniczyć wybór w danym węźle nadrzędnym. Na przykład, jeżeli element <text> żył bezpośrednio w węźle w swojej przykład można użyć:

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