Using XML as a datasource in d3js layout doesn't work in firefox

Question

I'm trying to use an XML file as the datasource for my d3js visualization. It works in webkit based browsers, but not in firefox. I believe the error comes from the fact that a DOM element has no forEach function. 3djs seems to expect an array somewhere where it receives a DOM object. But I don't know where

My children function looks like this.

var bubble = d3.layout.pack()
    .sort(null)
    .children(function(d){
        var c = $("system",d);
        if (c.length<=0) c = $("planet",d);
        return c;
    })

This is the XML document. I'm directly passing it to the d3js via

node = viz.selectAll(".node")
        .data(bubble.nodes(xmldata))
        .enter().append("g")
        .attr("class", "node")

This is a live demo of the code (which works in webkit, but not in firefox). And here is the complete source code.

Answer 1

See here for a fix.

The problem is that a jQuery query result is being passed directly as nodes to the D3 layout. D3 writes various properties, such as "children", directly to each node. This can cause issues if there is an existing property with the same name being used for another purpose, such as jQuery's "children" in this case.