Javascript 了解d3选择

line.nodes

是一个包含多个对象的数组，我希望d3创建一个绑定到每个对象的圆。但是，上面的代码只创建了一个圆，绑定到数据数组中的第一个对象。为什么这对数据数组中的其余对象不起作用？

您应该在绑定数据后调用

var svg = d3.select("body").append("svg")
 ...
var nodes = svg.append("circle")
.data(line.nodes);

---

您需要告诉D3为所有不存在的选择元素创建节点。您可以使用

选择All

和

enter

来执行此操作。阅读Mike Bostock的选择教程，了解其工作原理和幕后真正的魔力

您将需要以下代码：

var svg = d3.select("body").append("svg")
var node = svg.selectAll(".circle");
node = node.data(graph.nodes)
  .enter()
  .append("circle")
  .attr("cx", function(d){return d.x;})
  .attr("cy", function(d){return d.y;})
  .attr("r", 10)

---

一开始可能最难理解的部分是，您对尚不存在的元素调用

selectAll

。这是“数据绑定”的一部分。您将数据绑定到一个选择，D3将在数据更改时创建、删除和更新元素。当您调用enter时，D3将使用使用append调用的元素和之后链接的属性为尚未包含它们的每个数据成员创建元素。

选择

。circle

将查找类为

circle

的元素，而不是您附加的circle元素。是的，您是对的。这是我从另一个项目复制的一段代码，所有的圆圈都有这个类名。

var svg = d3.select("body").append("svg")
    // Set some properties of your svg here
    .attr("height", height)
    .attr(...)

var nodes = svg.selectAll("circle")
    //Bind the data to the selection
    .data(line.nodes)
  .enter().append("circle")
    // Set attributes for the circles when D3 "enters" them.
    .attr("r", myradius)
    .attr(...)