How do I select a specific parent using d3?

As Gerardo Furtado pointed out in his comment , the best way to achieve this would be to walk up the DOM tree until the element having a class parent

. To keep it in the D3 universe, you can use a method selection.select()

that takes a select function as an argument:

If the selector is a function, it is evaluated for each selected element to pass the current date (d), the current index (i), and the current group (s) as the current DOM Element (nodes [i]). It should return an element or null if no matching element exists.

By calling this when a child is selected, you are accessing the child DOM with this

. From there, you can traverse the DOM upwards by reading the property .parentElement

.

The implementation can be done in the following lines:

var child = d3.select(".child");                // Select the child

var parent = child.select(function() {
  var element = this;                           // this points to the child element
  while (!d3.select(element).classed("parent")) // while no class "parent" was found...
    element = element.parentElement;            // ...walk up one level
  return element;                               // return the parent element
});

console.log(parent);                            // <div class="parent">…</div>
      

        
        
        
      

    

<script src="https://d3js.org/d3.v4.js"></script>

<div class="parent">
   <div class="stepson">
       <div class="child">
            Wassup Fatso?
       </div>
   </div>
</div>