18

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

1 に答える 1

32

使用する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'});
})
于 2013-08-07T05:30:21.523 に答える