Question

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

line.nodes是一个包含多个对象的数组，我希望d3创建一个绑定到每个对象的圆。但是，上面的代码只创建一个圆，绑定到数据数组中的第一个对象。为什么这对数据数组中的其余对象没有做同样的事情？

Answer 1

绑定数据后应调用.enter()。

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)

Answer 2

您需要告诉D3为所有尚未存在的选择元素创建节点。您可以使用selectAll和enter执行此操作。阅读Mike Bostock关于选择的教程，了解其工作原理以及幕后真正的魔力。 http://bost.ocks.org/mike/selection/

您需要的代码如下：

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(...)

最初可能最难包围的部分是你在尚未存在的元素上调用selectAll这一事实。这是＆＃34;数据绑定的一部分。＆＃34;您将数据绑定到选择，D3将在数据更改时创建，删除和更新元素。当你调用enter时，D3会为不具备它们的数据的每个成员创建元素，使用带有append的元素和之后链接的属性。

了解d3选择

2 个答案: