像这样的 DOM:
<g.module>
<g.control>
<rect>
我没有找到最接近的 API: https ://github.com/mbostock/d3/wiki/API-Reference
如何从它的父级获取最近的匹配元素?像这样:
var module = d3.select(".control").closest(".module");
像这样的 DOM:
<g.module>
<g.control>
<rect>
我没有找到最接近的 API: https ://github.com/mbostock/d3/wiki/API-Reference
如何从它的父级获取最近的匹配元素?像这样:
var module = d3.select(".control").closest(".module");
如果您的 DOM 确实是那个特定的示例,您可以选择带有 D3 的父节点,如他们的文档中所述:
您可以通过检查每个组数组的 parentNode 属性来查看每个组的父节点,例如 selection[0].parentNode。
所以在你的情况下,var module = d3.select(".control").parentNode;
应该工作。
浏览器现在在 DOM 节点上有最接近的方法:
d3.select(rect.node().closest('svg'));
以及使用此方法与@JayB 类似的代码:
d3.selection.prototype.closest = function(selector) {
var arr = [];
return this.each(function() {
arr.push(this.closest(selector));
});
return d3.selectAll(arr);
};
允许使用:rect.closest('svg');
唯一的问题是IE不支持
您可以像这样将“最接近”添加到 d3 选择原型:
d3.selection.prototype.closest = function(selector){
var closestMatch = undefined;
var matchArr = [];
this.each(function(){
var elm = this;
while(typeof elm.parentNode.matches === "function" && !closestMatch){
elm = elm.parentNode;
if(elm.matches(selector)){
closestMatch = elm;
matchArr.push(closestMatch);
}
}
closestMatch = undefined;
});
return d3.selectAll(matchArr);
}
您可以使用 jquery 进行选择并将其传递给 d3。
var selection = $('.control').closest('.module');
var module = d3.select(selection);
根据您的需要,这可能会或可能不会起作用,但可能是一个简单的解决方法。