簡單的圓形動畫僅在第一次顯示時

我試圖在地圖上每秒放置一圈。該動畫包含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代碼中追加元素。 –

簡單的圓形動畫僅在第一次顯示時

回答

相關問題