D3.js : Set multiple attributes of SVG shape - d3.js

Question

My data array looks like this:
circleData = {
"x": [10,20,30,40], "r":[1,2,3,4], "y": [0,0,0,0]
},
{
"x": [15,25,35,45], "r":[5,6,7,8], "y": [20,20,20,20]
}
I want to create two rows of four circles with the above x, r, and y parameters. But how? The problem is, if the x values are bound in order to create the circles, then the circles have "access" to the x data, but no longer to the r or y data.

Answer 1

As mentioned in Lars Kotthoff's comment, the easiest way will probably be to restructure your data. Because D3's data binding relies on arrays, one approach would be something like this:
circleData = [{
"x": [10,20,30,40], "r":[1,2,3,4], "y": [0,0,0,0]
},
{
"x": [15,25,35,45], "r":[5,6,7,8], "y": [20,20,20,20]
}];
var circles = d3.merge(circleData.map(function(d) {
return d3.zip(d.x, d.y, d.r);
}));
This will give you a 2-dimensional array containing 8 arrays representing all 8 circles with their cx, cy, and r parameters.
You may then bind circles as your data and operate very D3-ish on it.
var circleData = [{
"x": [10, 20, 30, 40],
"r": [1, 2, 3, 4],
"y": [0, 0, 0, 0]
}, {
"x": [15, 25, 35, 45],
"r": [5, 6, 7, 8],
"y": [20, 20, 20, 20]
}];
var circles = d3.merge(circleData.map(function(d) {
return d3.zip(d.x, d.y, d.r);
}));
var svg = d3.select("body")
.append("svg").append("g")
.attr("transform", "translate(50,50)"); // Translate for the sake of visibility
svg.selectAll("circle")
.data(circles).enter()
.append("circle")
.attr({
"cx": function(d) {
return d[0];
},
"cy": function(d) {
return d[1];
},
"r": function(d) {
return d[2];
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>