jquery - d3 相当于 jQuery Parent()

Question

我有各种 SVG <g>对象，每个对象都有一个 <circle> child 和一个<text> child 。我可以使用select()查找特定的<text>对象，通过附加到它的类，然后修改它:

d3.select('text.my-class')
    .classed("my-class",false).classed("new-class",true)
    .text("Next Stage!")
    ;

现在我需要修改它的同级圈。圆圈没有特定的标识类(hhmmm...也许给它一个将是 d3 的方法？)，所以我的第一次尝试是类似 jQuery 的:

d3.select('text.my-class').parent().select('circle')
    .attr('style','fill:#f00;')
    ;

失败并显示“父项不是函数”。

类似问题(How to select parent element of current element in d3.js)的答案建议this.parentNode ，但要么我使用错误，要么它在这里不起作用。我已经尝试过这两种方法:

d3.select('text.my-class').select(parentNode).select('circle')
d3.select('text.my-class').select(this.parentNode).select('circle')

Answer 1

D3 没有访问父节点的方法。您可以使用 node() 方法访问所选元素的 DOM 节点。该元素将具有 parentNode 属性:

var textNode = d3.select('text.my-class').node(),  // DOM node
    parentNode = textNode.parentNode,              // Parent DOM node
    parentSelection = d3.select(parentNode),       // Selection containing the parent DOM node
    circle = parentSelection.select('circle');     // selection containing a circle under the parent selection

在回调中，您可以使用:

d3.select('text.my-class')
   .on('mouseover', function(d) {
      // The 'this' context is set to the DOM element, not the selection
      var circle = d3.select(this.parentNode).select('circle');
      circle.attr('fill', 'red');
   });

问候，