无法使用d3选择svg元素

Question

I am working on a visualization tool that uses a svg image of the brain. Now this svg has paths that are filled with a color. I want to loop over all these paths to set the fill color to white, but for some reason I cannot get the element.

The project can be seen here . The svg is inside a div and I even assigned an identifier brain to the div. The svg itself has an id svg2 . So far I've tried the following:

function clearBrainColors() {
    var brain = d3.select("#svg2");
    console.log(brain);
    var paths = brain.selectAll("path");
    console.log(paths.length);
    brain.selectAll('path').each(function(d,i) { console.log(this); });
}

But it outputs null in the array[0] component of the selection and 0 with paths.length.

I've also tried to use lines such as

var brain = d3.select("#brain svg"); and var brain = d3.select("#brain svg#svg2"); but those do not work either.

So, how can I select the brain svg using d3?

Answer 1

Decided to put the svg inline as it apparently speeds things up .

The code I used to fill the svg is now:

$("#svg2").find("path").each(function(){
       $(this).css({ fill: "#ff0000" });
    });

Answer 2

You can try setTimeOut() , following example

setTimeOut(function() {

    var brain = d3.select("#svg2");
    console.log(brain);

}, 1000);

this could be the svg is generate on the spot, d3 unable get at that moment.

Hope this help :)