D3js page: how to replace topojson generated svg by stand alone svg file?

Question

Given a D3js script, with interactive functionalities a lot like what I want, using a topojson to generate its SVG.

Given I, on my side, don't have topojson but a SVG file, on which I wish to reuse the same interactive functionalities.

How should I process so my D3js code load my SVG file rather than generate one from a topojson ?

I will of course provide a strictly coded SVG file, with suitable ids and syntaxe.

---

Idea: I guess I should replace the

d3.json("/mbostock/raw/4090846/us.json", function(error, us) { 
  // further SVG generator code here
});

which generate the SVG code by something to load and place my SVG file, but how to process ? what code to use ?

Answer 1

You can include the SVG file directly in your HTML, no need to load it in Javascript. For example:

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

The only thing to keep in mind with this is that you end up with two DOMs in your document (the main HTML one and the embedded SVG one) and CSS selectors don't cross DOM boundaries. That is, d3.select("#IDinSVG") probably won't work, but something like d3.select(d3.select("#mySVG").node().getDocumentElement()).select("#IDinSVG") should.