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

我有一个包含多个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

最佳答案

实际上，这似乎可行(只是添加了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>

关于d3.js - D3(v4): update pattern multiple elements in group，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43470415/