javascript - 在 SVG 上选择内部 tspan

Question

我目前有以下结构

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

我有几个具有相同节点的 g 元素。我想要的是在单击圆圈时访问 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')

但是这些都不起作用。

Answer 1

您可以先选择parentNode，然后再获取正确的子节点

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

查看此fiddle