d3.js selectAll().each on svg path.. undefined?

Question

I'm importing a svg (served as static content from the server) in this way

d3.xml("http://localhost:3000/mysvg.svg", "image/svg+xml", function(xml) {
    var importedNode = document.importNode(xml.documentElement, true);
    var mySvg = d3.select("#somediv").node().appendChild(importedNode);

then I'm trying to iterate through all svg paths and do something with them

    d3.selectAll("#somediv svg path").each(function(d, i) {
        console.log(this, d, i);
    });
}

what I'm getting is this problem

• i is from 1 to number of path, which is correct.

• d is undefined instead of being the right svg path element.

• this is the svg path element, like this one

  <path id="m021" fill="#00AAFF" d="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" ></path>

I expected d to be the real svg path, why is it not?

EDIT:

A little insight on what I want to do could maybe help.

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.

What is the best way to do this?

Answer 1

Simplifying your original request, let's suppose you want to add a circle in the center of each district. Let's assume that the districts are relatively square. Note that this would be much more simpler if you have geographical data instead of paths.

var svg = d3.select("#somediv svg");
var districts = svg.selectAll("path");

var district_centers = districts[0].map(function(d, i) {
    var bbox = this.getBBox();
    return [bbox.left + bbox.width/2, bbox.top + bbox.height/2];
});

svg
  .selectAll("circle")
  .data(district_centers)
  .enter()
  .append("circle")
     .attr("class", "district_circle")
     .attr("cx", function(d){ return d[0]})
     .attr("cy", function(d){ return d[1]})
     .attr("r", 10)
     .attr("fill", "red");

Answer 2

According to the API doc for selection.each, d should be the datum, which you will not have if you have not previously called .data() to bind data to the nodes. All you have is pure SVG with no data bound to it.

I notice that your paths do have IDs, so if you have a dataset matching those ID's you can probably bind to it using the keys parameter of the .data function