我有各种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')
解决方法
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');
});
问候,
