Question

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

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

现在我需要修改它的圆形兄弟。圆圈没有特定的识别类（嗯......也许给它一个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');
   });

此致

Answer 2

您可以使用：

selection.select(function() { return this.parentNode; });

您也可以将自己的.parent（）方法添加到d3.selection.prototype：

d3.selection.prototype.parent = function() {
    return this.select(function() { return this.parentNode; });
};

// example!
d3.selectAll(".child").parent().each(function() {
  console.log(this.className);
});

demo on jsbin

d3相当于jQuery parent（）

2 个答案: