更改与D3选择相关的基础数据？

Question

我在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选择相关的基础数据？

Answer 1

您有两种选择：在加入元素之前使用array.map函数修改数据数组，或使用selection.datum method修改每个数据对象而不更改数据加入。您无法从选择中获取原始数据数组并进行修改。

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

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