d3ノードのテキストをホバーにだけ表示する

Question

マウスオーバー時にノードテキストを表示しようとしています。ノードをマウスオーバーすると、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); 

Answer 1

あなたが<text>要素のための全体のDOMを検索し、最初の一つを選択しているd3.select使用している場合。特定のテキストノードを選択するには、より具体的なセレクタ（たとえば#textnode1）が必要です。または、特定の親ノードの下で選択を制限するために、サブセレクションを使用する必要があります。 <text>要素は、あなたが使用することができ、あなたの例では、ノードの直下に住んでいた場合、例えば：

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