简单的圆形动画仅在第一次显示时

我试图在地图上每秒放置一圈。该动画包含4个圆圈，一旦在地图上添加了一个点，就会显示该圆圈。简单的圆形动画仅在第一次显示时

后的第一次动画是不是再次重复。我不知道为什么会发生这种情况。添加新点时，动画不会再发生。

https://plnkr.co/edit/benkcHIINN9DCjvIvtEn?p=preview

var aNumCircles=[1,2,4,5]; 
    function addpoints(){ 
     //add circle on map 
     var coordenadas=map.latLngToLayerPoint([coordinates[cont].lat,coordinates[cont].long]); 
      svg.append('circle').attr("cx",coordenadas.x) 
      .attr("cy", coordenadas.y) 
      .attr("r", 1) 
      .style("fill",'red') 
      .attr("class",'circulo_mapa') 
     //add animation circles on map 
      var circle = svg.selectAll("circle").data(aNumCircles).enter().append('circle') 
        .attr("cx",coordenadas.x) 
        .attr("cy", coordenadas.y) 
        .attr("id", cont) 
        .attr("r", 0) 

        .style("stroke-width", function(d,i){ return 5/(i+1) }) 
        .attr("class", 'animation_explosion') 
        .transition() 
         .delay(function(d,i){ return Math.pow((i+1), 2.5) * 50 }) 
         .duration(2000) 
         .ease('quad-in') 
        .attr("r", 25) 
        .style("stroke-opacity", 0) 
        .each("end", function (d,i) { 
         d3.select(this).remove(); 
        }); 
     cont++; 
    } 
    var interval = setInterval(function(){ 
     addpoints(); 
     if(cont==5){ 
      clearInterval(interval); 
     } 
    },1000);

来源

2017-08-17 yavg

的问题就是在这个选择的第一行：你的“输入”选择

var circle = svg.selectAll("circle") 
    .data(aNumCircles) 
    .enter() 
    .append("circle") 
    //etc...

由于已经在SVG界在第二次addpoints()运行，将是空的。

取而代之的是，它应该是：

var circle = svg.selectAll(null) 
    .data(aNumCircles) 
    .enter() 
    .append("circle") 
    //etc...

通过使用selectAll(null)你可以完全肯定的是你的“输入”选择有你的数据阵列中的所有元素。

这里是更新plunker：https://plnkr.co/edit/3u0er01thuj5P8e0XqO6?p=preview

来源

2017-08-17 05:10:04

谢谢。这也是通过'for'循环解决的。这两种方式中的哪一种会是最优的？也许你可以帮助我解决这个问题https://stackoverflow.com/questions/45697728/put-a-circle-in-a-real-coordinate-using-d3-js我试图使用缩放侦听器并重新计算每个圆圈这是在地图上，是最好的方式？ – yavg

绝对是输入选择。尽量避免'for'循环在D3代码中追加元素。 –

简单的圆形动画仅在第一次显示时

回答

相关问题