D3: Select and alter external SVG?

Question

Is it possible to select and alter elements in an embedded (external) SVG , created in Adobe Illustrator?

html:

<object data="circles.svg" type="image/svg+xml" id="circles"></object>

circles.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" >
  <circle id="c_red" fill="#A00" stroke="#000" cx="40" cy="40" r="40"/>
  <circle id="c_grn" fill="#0A0" stroke="#000" cx="60" cy="60" r="40"/>
</svg>

d3 code:

<script>
  var my_circles = d3.select("#circles svg").selectAll("circles");
  my_circles.attr("fill", "black");
</script>

Otherwise, I'm open to other ways of doing this. For example, something like this might work to select (which does indeed locate the SVG):

var svg = document.getElementById('circles');

But how to then parse and alter in D3? Bonus question: best way to debug D3 selectors?

Waldack

Answer 1

This is actually a nasty case, because you can't use DOM selectors directly on embedded documents. In principle, the selector you need is "#circles > circle", but this won't work in this case. So you need something rather ugly like

var my_circles = d3.select(document.getElementById("circles").contentDocument)
                   .selectAll("circle");

I find the Javascript console quite useful for debugging selectors. Just type in what you want to test and see if the things you want are returned.

The problem is that the above code only works once the object has been loaded. Even using something like JQuery's .ready() won't be sufficient to ensure that. A quick and dirty solution is to repeatedly check whether the elements are present until they are:

function changeColor() {
  var sel = d3.select(document.getElementById("circles").contentDocument)
              .selectAll("circle");
  if(sel.empty()) {
    setTimeout(changeColor, 100);
  } else {
    sel.attr("fill", "black");
  }
}
changeColor();

Full example here.

Rena

I tried your code, but I'm still getting "0: Array[0]" in my Javascript console, which I interpret as returning zero elements, right? Shouldn't there be two 'circle's in this array? And what about the intermediate "svg" element? – Waldack

You should be able to select the circles without specifying the intermediate SVG explicitly. Can you post a complete example somewhere? – Rena

I basically just included what's in the example: gist.github.com/allanberry/5864358 – Waldack

Selecting the circles with the code I've posted works fine for me. – Rena

Hmm... for me it returns an empty array. – Waldack

Ah ok, this is actually a subtle loading issue. I'll update the answer. – Rena

Got it, thanks. So basically I have to replicate this for each SVG on the page? Perhaps I could reload D3 after every SVG has loaded? – Waldack

You can check as many elements in the condition as you like, but it looks like you have to poll for this -- the DOMContentLoaded event fires before the external objects have been loaded. – Rena

FYI, I've posted a question to clarify the loading issue -- #17348033 – Rena