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 `` I expected `d` to be the real svg path, why is it not? EDIT: A little insight on what I want…

Accepted Answer

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");
```

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

Solution

Problem