将新变量绑定到__data__，保留现有变量

Question

我将(x,y)数据绑定到几个圆圈，如下所示：

var svg = d3.select("body")
  .append("svg")
    .attr("width", 640)
    .attr("height", 400)

var data = [{x: 100, y: 100}, {x: 200, y: 200}]

var circles = svg.selectAll("circle").data(data)
  .enter().append("circle")
    .attr("r", 20)
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })

我现在想要使用简单的index join将新变量z绑定到每个圈子。

newdata = [{z: 10}, {z: 30}]
circles.data(newdata)

如果我现在circles.data()我发现z变量已按预期绑定，但x和y已不再存在。

有没有办法让x，y和z绑定到圈子的数据？

请注意，this SO question的标题听起来很相似，但它并没有问同样的事情！

Answer 1

使用selection.each函数可以很容易地完成此操作：

// Add a new variable, 'z', equal 2 * x
circles.each(function(d) { d.z = d.x * 2; });

或者，对于要绑定的新数据存储在名为newdata的对象列表中的特定情况（使用简单的索引来连接数据）：

circles.each(function(d, i) { d.z = newdata[i].z; });