2016-11-23 31 views
1

內TSPAN我現在有以下結構選擇上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