Question

我正试图每秒在地图上放置圆圈。此动画由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);

Answer 1

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

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

由于第二次addpoints()运行时SVG中已有圈子，您的＆＃34;输入＆＃34;选择将是空的。

而不是那样，它应该是：

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

通过使用selectAll(null)，您可以完全确定您的输入＆＃34; selection包含数据数组中的所有元素。

以下是更新的plunker：https://plnkr.co/edit/3u0er01thuj5P8e0XqO6?p=preview

简单圆圈动画仅在第一次显示

1 个答案: