title: d3.js selectAll().each on svg path.. undefined?
body: <p>I'm importing a svg (served as static content from the server) in this way</p>
  <pre><code>d3.xml(&quot;http://localhost:3000/mysvg.svg&quot;, &quot;image/svg+xml&quot;, function(xml) {
      var importedNode = document.importNode(xml.documentElement, true);
      var mySvg = d3.select(&quot;#somediv&quot;).node().appendChild(importedNode);
  </code></pre>
  <p>then I'm trying to iterate through all svg paths and do something with them</p>
  <pre><code>    d3.selectAll(&quot;#somediv svg path&quot;).each(function(d, i) {
          console.log(this, d, i);
      });
  }
  </code></pre>
  <p>what I'm getting is this problem</p>
  <ul>
  <li><p><code>i</code> is from 1 to number of path, which is correct.</p>
  </li>
  <li><p><code>d</code> is <code>undefined</code> instead of being the right svg path element.</p>
  </li>
  <li><p><code>this</code> is the svg path element, like this one</p>
  <p><code>&lt;path id=&quot;m021&quot; fill=&quot;#00AAFF&quot; d=&quot;M225.438,312.609c-0.665-1.084-1.062-1.691-2.368-1.963c-0.582-0.121-1.686-0.271-2.265-0.069  c-0.507,0.174-0.637,0.649-1.431,0.368c-0.934-0.33-0.665-1.272-0.71-2.104c-0.597-0.021-1.18,0-1.733,0.262  ...etc&quot; &gt;&lt;/path&gt;</code></p>
  </li>
  </ul>
  <p>I expected <code>d</code> to be the real svg path, why is it not?</p>
  <h3>EDIT:</h3>
  <p>A little insight on what I want to do could maybe help.</p>
  <p>I have a svg with one path for each district of my town. I want to make some piecharts in the center of each path. I don't have the data now, it will be used for the piecharts. I want to make a mouseover function on the path, and add a little red circle (that in a future step will become the pie chart) on each path.</p>
  <p>What is the best way to do this?</p>