Can't select svg element with d3

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?

isn't the class 'point' your brain ? just looking at the elements in the developer tools. have you got a simple fiddle to look at also ... — thatOneGuy, May 21 '15 at 10:51
The brain is in a separate document which you are loading via the ` — Robert Longson, May 21 '15 at 10:54
@RobertLongson Well I want to apply css by using javascript (d3), so not directly apply css. But maybe you cannot even reach the svg with Javascript... good point, i'll look into it. Edit: apparently you should be able to, see http://stackoverflow.com/a/21503151/1360853 — Gooey, May 21 '15 at 10:56
Indeed, if you get the contained document via javascript you can dig into its CSS. — Robert Longson, May 21 '15 at 11:01

score 0 · Accepted Answer · answered May 21 '15 at 11:31

0

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" });
    });

answered May 21 '15 at 11:31

Gooey

4,740
10
42
76

score -1 · Answer 2 · answered Aug 22 '16 at 08:38

-1

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 :)

answered Aug 22 '16 at 08:38

Edwin Wong

703
1
8
11

Can't select svg element with d3

2 Answers2