D3 (v4)：更新模式组中的多个元素

Question

我有一个包含多个g元素的图表，其中包含 acircle和 atext元素。

我使用以下代码：

  var nodes = [{"oe": 1, "name": 'test'},{"oe": 1, "name": 'test2'},{"oe": 0, "name": 'test3'}]

  //join 
  var nodeGroups = d3.select('g.maingroup').selectAll('g.nodegroup').data(nodes);

  //enter
  var nodeGroupsEnter = nodeGroups.enter().append('g').attr("class", "nodegroup");      
  nodeGroupsEnter.append("circle");              
  nodeGroupsEnter.append("text");

  //update
  nodeGroups.select("circle")
    .attr("r", 4)
    .attr("class", function(d) {
      return ((d.oe) ? " oe" : "");
    });

  nodeGroups.select("text")
    .text(function (d) {
      return d.name;
    })
    .attr("text-anchor", "top")
    .attr("y", 10)
    .attr("dy", -15);    

  //exit
  nodeGroups.exit().remove();   

g绘制了所有元素，但是circle和text元素都是空的，在更新过程中似乎没有正确添加属性。关于为什么会这样的任何想法？

注意：我使用的是 d3 的 v4

Answer 1

实际上这似乎有效（刚刚添加和svg元素并使节点居中）

编辑

对于 v4，您需要合并选择，请参见下文：

var nodes = [{
  "oe": 1,
  "name": 'test'
}, {
  "oe": 1,
  "name": 'test2'
}, {
  "oe": 0,
  "name": 'test3'
}]

//join 
var nodeGroups = d3.select('svg').append('g')
 .attr('transform', 'translate(50, 50)')
 .selectAll('g.nodegroup').data(nodes);

//enter
var nodeGroupsEnter = nodeGroups.enter().append('g').attr("class", "nodegroup");

nodeGroupsEnter.append("circle");
nodeGroupsEnter.append("text");

//update
nodeGroups.merge(nodeGroupsEnter).select("circle")
  .attr("r", 4)
  .attr("class", function(d) {
    return ((d.oe) ? " oe" : "");
  });

nodeGroups.merge(nodeGroupsEnter).select("text")
  .text(function(d) {
    return d.name;
  })
  .attr("text-anchor", "top")
  .attr("y", 10)
  .attr("dy", -15);

//exit
nodeGroups.exit().remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>
<svg width="100" height="100"></svg>