D3.js：设置SVG形状的多个属性

Question

我的数据数组如下所示：

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] 
}

我想用上面的x，r和y参数创建两行四个圆圈。但是怎么样？问题是，如果为了创建圆圈而绑定了x值，则圆圈具有＆＃34; access＆＃34;到x数据，但不再是r或y数据。

Answer 1

正如Lars Kotthoff的评论中所提到的，最简单的方法可能是重构您的数据。因为D3的数据绑定依赖于数组，所以一种方法就是这样：

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);
}));

这将为您提供一个包含8个数组的二维数组，这些数组代表所有8个圆圈及其cx，cy和r个参数。

然后，您可以绑定circles作为您的数据，并在其上运行D3- ish 。

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>