External SVG + D3 I

this example uses d3 to manipulate paths inside of an svg loaded from an external file.

the D3 logo svg is from the eponymous D3 Logo bl.ock

this example is based on earlier research for the bl.ock Sporthorse Foal Registrations II. I've found this technique useful again recently, and thought it deserved a few examples of its own.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>External SVG + D3</title>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style>

/* Make the chart container fill the page using CSS. */
      #chart {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }
    </style>
  </head>
  <body>

// load the external svg from a file
      d3.xml("d3.svg", "image/svg+xml", function(xml) {
      var importedNode = document.importNode(xml.documentElement, true);
      d3.select("div#vis")
        .each(function() {
          this.appendChild(importedNode);
        })
        // inside of our d3.xml callback, call another function
        // that styles individual paths inside of our imported svg
        styleImportedSVG()
      });

https://d3js.org/d3.v3.min.js