Selecting inner tspan on SVG

Question

I currently have the following structure

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

I have several g elements with the same nodes. What I want is to access the tspan when the circle is clicked. The logic when the circle is clicked goes like this:

    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);

So far I have tried the following:

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

But none of these work.

Answer 1

You can select the parentNode first and then get the right child

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

See this fiddle