13

像这样的 DOM:

<g.module>
  <g.control>
    <rect>

我没有找到最接近的 API: https ://github.com/mbostock/d3/wiki/API-Reference

如何从它的父级获取最近的匹配元素?像这样:

var module = d3.select(".control").closest(".module");
4

4 回答 4

1

如果您的 DOM 确实是那个特定的示例,您可以选择带有 D3 的父节点,如他们的文档中所述

您可以通过检查每个组数组的 parentNode 属性来查看每个组的父节点,例如 selection[0].parentNode。

所以在你的情况下,var module = d3.select(".control").parentNode;应该工作。

于 2015-04-17T01:40:01.633 回答
1

浏览器现在在 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不支持

于 2018-07-03T14:51:53.337 回答
1

您可以像这样将“最接近”添加到 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);
        }
于 2015-11-09T19:24:00.203 回答
0

您可以使用 jquery 进行选择并将其传递给 d3。

var selection = $('.control').closest('.module');
var module = d3.select(selection);

根据您的需要,这可能会或可能不会起作用,但可能是一个简单的解决方法。

于 2014-01-28T18:27:32.233 回答