はSVG

2016-11-23 5 views
1

の内tspanの選択私は現在、私は同じノードといくつかのG要素を有する以下の構造はSVG

svg 
    g 
    circle 
    text 
    text 
    text 
    text 
     tspan class='minus-clicks' 
... 

を有します。私が望むのは、円がクリックされたときにtspanにアクセスすることです。円がクリックされたロジックはこのように書き:

var node = svg.selectAll("circle") 
    .data(nodes) 
    .enter() 
    .append('g') 
    .append("circle") 
    .style("fill", function (d) { 
    return 'rgb(108,181,205)'; 
    }).on("click", function (d, i) { 
    if (i < 5) { 
     d.radius *= 1.1; 
     d3.select(this).attr("r", d.radius); 

     // positions minus sign on every circle 
     d3.select(this).select('.minus-clicks').style('display', 'block'); 
     d3.selectAll('.minus-clicks') 
     .attr('x', d.radius/2) 
     .attr('dy', -((1/30*d.radius)-1)+'em'); 

     force.resume(); 
    } 
    }).call(force.drag); 

これまでのところ、私は次のことを試してみました:

d3.select('circle').select('.minus-clicks') 
d3.select('circle').selectAll('.minus-clicks') 
d3.select('circle .minus-clicks') 

しかし、これらの作品のどれも。

+2

を参照してください? – echonax

+0

@echonax私はconsole.logを実行するとnullを出力します – Monica

+1

ここで問題を再現しようとしました:https://jsfiddle.net/w8v2skx1/(同じ階層でない場合は教えてください)。 'x'(私は' cx'を使った)にコールバックを渡すとわかるように、値を記録し、 'tspan'の' cx'属性を実際に変更します。だから別の問題があると思う。 – echonax

答えて

1

あなたはparentNode最初に選択し、次に

d3.select(this.parentNode).select('.minus-clicks') 

右の子を得ることができますが、それらが選択されていない知ってどのようにこのfiddle

+0

ありがとう!出来た!! – Monica