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元素都为空，在更新fase期间似乎没有正确添加属性。有关为什么会这样的想法？

note ：我正在使用d3的v4

Answer 1

实际上这似乎有效（只添加了svg元素并以节点为中心）

修改的

对于v4，您需要选择this is the code from the website，见下文：

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（v4）：更新模式组中的多个元素

1 个答案: