选择上SVG

内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')

但所有这些工作。

来源

2016-11-23 Monica

你怎么知道他们是没有选择？ – echonax

@echonax当我做一个console.log它打印null – Monica

我试着重现你的问题在这里：https://jsfiddle.net/w8v2skx1/（告诉我，如果它不是相同的层次结构）。正如你所看到的，如果你给你的'x'（我使用'cx'）回调，它会记录这个值并且实际上改变'tspan'的'cx'属性。所以我认为你有另一个问题 – echonax

您可以选择parentNode第一，然后得到正确的孩子

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

看到这个fiddle

来源

2016-11-23 21:40:48

非常感谢！有效！！ – Monica

回答

相关问题