Does d3 have api which similar with jQuery.closest(selector)?

Question

DOM like this:

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

I didn't find the closest API: https://github.com/mbostock/d3/wiki/API-Reference

How can I get the nearest matched elements from it's parent? Just like this:

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

Wooden

D3 doesn't provide any functionality to move up the DOM tree. – Theca

Answer 1

Browsers now have closest method on DOM node:

d3.select(rect.node().closest('svg'));

and similar code to @JayB with this method:

d3.selection.prototype.closest = function(selector) {
  var arr = [];
  this.each(function() {
    arr.push(this.closest(selector));
  });
  return d3.selectAll(arr);
};

that allow to use just: rect.closest('svg');

the only problem is that it's not supported by IE

Wes

It doesn’t work with any versions of IE or only legacy browsers of IE. – Aachen

@JavascriptCoder MDN link provide the chart, it seems that closest is not supported by IE but you can create polyfill for that method. Or you can use JayB solution, this one is for modern browsers. Also if you have to add closest polyfill it will be shorter to just add closest to d3. – Wes

Answer 2

If your DOM is really that specific example, you can select parent nodes with D3 as noted in their docs here:

You can see the parent node of each group by inspecting the parentNode property of each group array, such as selection[0].parentNode.

So in your case, var module = d3.select(".control").parentNode; should work.

Apotropaic

Answer 3

You could add "closest" to the d3 selection prototype like this:

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

Unveiling

Answer 4

You can make the selection with jquery and pass that to d3.

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

This may or may not work depending on what you need it for, but might be a simple workaround.

Johnnyjohnnycake