How to convert a jQuery object into a d3 object?

Question

I have a Problem with using jQuery together with D3js.

I have a jQuery element named "elem" and I want to do some D3js functions.

This code works:

d3.select("body").append("svg").attr("width", 300).attr("height", 300).append("g").attr("transform", "translate(150,150)").selectAll("text").data(words).enter().append("text")......

This code does not

elem.append("svg").attr("width", 300).attr("height", 300).append("g").attr("transform", "translate(150,150)").selectAll("text").data(words).enter().append("text")......

So how to convert the jQuery Object into a D3 Object?

Answer 1

You can get the DOM Elements themselves from the jQuery object using .get() method or array notation on the jquery object, and then select them with d3 selector like you would any DOM Element.

Note that while both works, jQuery faq mentions that array notation is faster.

d3.select($("#selection").get(0));
d3.select($("#selection")[0]); // equivalent to above but faster

Edit: Thanks to Ken Fox for pointing out jQuery faq.

Answer 2

You can't convert the objects directly. You need to re-select the element using d3js. d3js selectors work like this

d3.select("#mydiv")

So simply extract the id from the jQuery element like so

d3.select("#" + elem.attr("id")).append("svg").attr("width", 300)... 

Of course if you're only using jQuery to select the element, then you should switch to d3js selection instead.

EDIT: I prefer Ozan's answer above, use that!