Question

每次调用draw时，circle会附加到每个g元素。
如何仅将circle附加到新的g元素？没有数据要绑定到circles

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;})是否会获得正确的数据。如果没有，您可能需要在组中的每个方法中附加圆圈。

仅将子项附加到新元素D3.js

1 个答案: