javascript - 简单的圆形动画只在第一次显示

Question

我试图每秒在 map 上画一个圆圈。该动画由 4 个圆圈组成，在 map 上添加一个点后会显示这些圆圈。

第一次之后动画不再重复。我不知道为什么会这样。添加新点时，动画不会再次发生。

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);

Answer 1

问题只是这个选择的第一行:

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

由于 addpoints() 第二次运行时 SVG 中已经有圆圈，因此您的“输入”选择将为空。

取而代之的是:

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

通过使用 selectAll(null)，您可以完全确定您的“输入”选择包含数据数组中的所有元素。

这是更新的插件:https://plnkr.co/edit/3u0er01thuj5P8e0XqO6?p=preview