D3js：同一选择中的两个.append方法不能在同一行中

Question

问题是如果代码在这里看起来更漂亮：

var nodesgroup = svg.append("g")
  .attr('class', 'nodes')
  .selectAll('circle')
  .data(data['nodes'])
  .enter()
  .append('g');

nodesgroup.append('circle')
  .attr('r', 20)
  .call(d3.drag() //Define what to do on drag events
    .on("start", dragStarted)
    .on("drag", dragging)
    .on("end", dragEnded));

在一条线上。但是当您删除第二段的nodesgroup和第一段之后的;时，不再绘制圆圈。我不知道为什么链接这两段应该与第一段的输出没有什么不同，然后采取这些项目中的每一项并以这种方式对它们进行操作。

我对上述代码中发生的事情的理解：append('g')（D3选择）的结果存储在nodesgroup中。

然后，在第二段中，对于选择中的每个元素，（因为d3具有重写的附加，我假设？）.append('circle')被执行。

链接到JSFiddle

Answer 1

圈子是;在你的JSFiddle中，它们可以在左上角看到。问题是通过连接这两个语句，您正在更改nodesgroup中包含的选择内容。将它保存在两个不同的语句中，nodesgroup将包含一些新添加的g元素。另一方面，如果将两个语句连接成一个，则选择将包含附加到前组元素的circle元素。

虽然第一种方法适用于您的tick回调，但后者将打破该tick功能。 tick函数要求nodesgroup包含组元素，以便选择其中包含的圆圈和文本。这就是为什么绘制圆圈但是根据力布局不移动的原因。