d3.js - D3 (v4) : update pattern multiple elements in group

Question

我有一个包含多个 g 的图表包含 circle 的元素和一个 text元素。

我使用以下代码:

  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，您需要 merge选择，见下图:

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>