D3.js 是否更改与D3选择关联的基础数据？

我在D3中有一些圆圈，上面附有数据：

var data = [[0,1],[2,10],[3,4],[2,4]]

var circles = svg.selectAll(".dot")
  .data(data)
  .enter().append("circle")
  .attr("class", "dot")
  .attr("r", 5)
  .attr("cx", d[0])
   .attr("cy", d[1])

我想将绑定到这些圆的基础数据修改为对象数组：

circles = circles.data().map(function(d) {
  return {x: d[0], y: d[1]}
})

---

如何更改与D3选择关联的基础数据？

您有两个选项：在将数据数组加入元素之前，使用

array.map

函数修改数据数组，或者使用修改每个数据对象而不更改数据联接。您无法从选择中获取原始数据数组并对其进行修改

对于第一个选项，您的代码是：

var data = [[0,1],[2,10],[3,4],[2,4]];

data = data.map(function(d) {
  return {x: d[0], y: d[1]};
} );

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

var data = [[0,1],[2,10],[3,4],[2,4]];

var circles = svg.selectAll(".dot")
  .data(data)
  .enter().append("circle")
  .datum( function(d) {
      return {x: d[0], y: d[1]};
  } )
  .attr("class", "dot")
  .attr("r", 5)
  .attr("cx", function(d){return d.x;})
  .attr("cy", function(d){return d.y;})

对于第二个选项，您的代码是：

var data = [[0,1],[2,10],[3,4],[2,4]];

data = data.map(function(d) {
  return {x: d[0], y: d[1]};
} );

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

var data = [[0,1],[2,10],[3,4],[2,4]];

var circles = svg.selectAll(".dot")
  .data(data)
  .enter().append("circle")
  .datum( function(d) {
      return {x: d[0], y: d[1]};
  } )
  .attr("class", "dot")
  .attr("r", 5)
  .attr("cx", function(d){return d.x;})
  .attr("cy", function(d){return d.y;})

---

第三个选项是修改所选元素的

。\uuuuuuuuuuuuuuuuuuuuuuuuu

。哦，当然，如果你想吓唬d3新手，你可以提出来！对于@turtle，这基本上就是

.datum（）

方法所做的。