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