マウスオーバーでのみノードテキストを表示しようとしています。ノードにマウスオーバーすると、svg circleの不透明度が変化しますが、最初のノードのテキストのみが表示されます。これは、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);
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'});
})