Map Function to Selected Elements - d3.js

Question

Let's assume three circles within an svg.
<svg height="400" width="400">
<circle cx="100" cy="110" r="10"></circle>
<circle cx="200" cy="210" r="10"></circle>
<circle cx="300" cy="310" r="10"></circle>
</svg>
Now I would like to use d3.js to compose an array of objects representing the circles positions like so:
[{"x":100,"y":110},{"x":200,"y":210},{"x":300,"y":310}]
My intuition and rather rusty knowledge of d3.js tells me that something similiar to this should work:
d3.selectAll("circle").map(function () {
return {
"x": d3.select(this).attr("cx"),
"y": d3.select(this).attr("cy")
};
});
I map a function to the array of selected circles returning an object.
But it doesn't. Could somebody help me with this?
code on jsfiddle.net

Answer 1

D3 isn't really meant for this kind of thing, but if you absolutely want to, you can get into its internal data structures to extract the list of nodes and iterate over them:
var locations = d3.selectAll("circle")[0].map(function(el) {
return {
"x": d3.select(el).attr("cx"),
"y": d3.select(el).attr("cy")
};
})
Complete demo here.