How to turn a raw DOM element in to a D3 selection?

Question

Scenario: I have several svg elements on a page, each displaying a different graph. When a graph receives a mouse click it triggers an event handler wherein this corresponds to the raw svg element that was clicked. When this happens, I want to select the graph's path element with D3 in order modify it.

I know that I could give each graph an ID and then use that to make a D3 selection, e.g.

function on_click( event ) {
  var path = d3.select( '#' + this.id ).select( 'path' );
  path.do_stuff...
}

but I wondered whether there was an equivalent of jQuery's feature of turning raw DOM elements in to a jQuery object, e.g.

jQuery( my_raw_dom_element ).do_stuff...

Answer 1

Yes, you can simply do

d3.select(my_raw_dom_element);