d3.js way to specify .querySelectorAll("g[id^='text']")

[ar]

I am writing this code:  

 var someids = $("svgroot").querySelectorAll("g[id^='kaart']");   // collect all group id's starting with "kaart"
     d3.selectAll(someids )                    // make the d3 selection
           .attr("transform", function(d, i) {        // do something

What am I missing? How to use addvanced querySelector statements in D3 with selectAll?

[Tian Lin]

What is $ here? I think you need to confirm $("svgroot") would return a DOMElement rather than any other object. As querySelectorAll is natively supported in Selector API, you have an alternative syntax like:

var someids = document.querySelectorAll("#svgroot g[id^='kaart']");

// equivalent to: document.getElementById("svgroot").querySelectAll("g[id^='kaart']")

or just use d3 way:

d3.selectAll("#svgroot g[id^='kaart']")

[ar]

Thanks. So selectAll is short for querySelectorAll?

[marc fawzi]

yup and $(el)[0] in jQuery would give you the DOM element

however, there is a bug with querySelector and I assume select and
selectAll which are based on it

http://ejohn.org/blog/thoughts-on-queryselectorall/

Will post to separate thread to verify D3 is affected by this

[Chris Viau]

BTW, another way to get the DOM node to go from jQuery to D3 is:

var node1A = $('body').get(0);

var node1B = d3.select(node1A).node();

node1A === node1B // true