Question

像这样的DOM：

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

我找不到最近的API： https://github.com/mbostock/d3/wiki/API-Reference

如何从父母那里获取最近的匹配元素？就像这样：

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

Answer 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);
        }

Answer 2

浏览器现在有closest method on DOM node：

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不支持

Answer 3

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

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

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

Answer 4

如果你的DOM确实是那个特定的例子，你可以选择带有D3的父节点，如文档here中所述：

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

因此，在您的情况下，var module = d3.select(".control").parentNode;应该有效。

d3是否有与jQuery.closest（selector）类似的api？

4 个答案: