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

在SVG上选择内部tspan

1 个答案: