javascript - 仅将子元素附加到新元素，D3.js

Question

每次调用 draw 时，circle 都会附加到每个 g 元素。
如何仅将 circle 附加到新的 g 元素？没有数据可绑定(bind)到圈子

function draw(data){    
  var gs = svg.selectAll('g').data(data);

  gs.exit().remove();

  gs.enter().append('g')
    .attr("transform", function(d, i){return "translate(" + i*100 + "," + 0 + ")"; });

  var c = gs.append('circle')
    .attr('cx', function(d, i){return 100+i*200;})
    .attr('cy', 55)
    .attr('fill', 'cyan')
    .attr('r', 5)
    .transition()
    .duration(1000)
    .attr('r', 50);
 }

 draw([1, 2, 3, 4]);   // first time
 draw([1, 2, 3]);      // update

Answer 1

您遇到的基本问题是您将圆附加到所有 g 元素，无论是否是新创建的。 .enter() 方法仅返回新的。

不要使用 gs.append('circle')，而是使用 gs.enter().append('circle')，这样只有新元素才会附加一个圆圈。这是我的写法。

function draw(data){    
 var gs = svg.selectAll('g').data(data);

 gs.exit().remove();

 gs.enter().append('g')
   .attr("transform", function(d, i){return "translate(" + i*100 + "," + 0 + ")"; })
   .append('circle')
   .attr('cx', function(d, i){return 100+i*200;})
   .attr('cy', 55)
   .attr('fill', 'cyan')
   .attr('r', 5)
   .transition()
   .duration(1000)
   .attr('r', 50);
}

draw([1, 2, 3, 4]);   // first time
draw([1, 2, 3]);      // update

没有可供测试的工作示例，我不确定 .attr('cx', function(d, i){return 100+i*200;}) 是否会得到数据正确与否。如果没有，您可能需要在组的每个方法中附加圆圈。