向SVG添加更多圈子會大幅降低性能

Question

我有一個應用程序，可以在D3中繪製世界地圖，並使用來自不同來源的經度和緯度數據將它們繪製在地圖上。目前我從很多google'ing中學到的是，我可以通過將「circle」附加到SVG來繪製點，它在我的網頁打開後的前15到20秒內工作正常，後來一切都變得緩慢和草率。

我不確定如何保持頁面性能不錯，並且不會爲每一個添加了SVG的單個圓圈添加新的DOM元素。我是否需要使用其他技術來實現這一目標？請指教。

我的代碼如下所示，我稱它爲每5秒500次。

function draw_point(lat, lon, keyword) { 
    var x = projection([lon, lat])[0]; 
    var y = projection([lon, lat])[1]; 
    svg.append("circle") 
     .attr("cx", x) 
     .attr("cy", y) 
     .attr("r", 0.5) 
     .style("fill", "gold"); 

     svg.append("text") 
      .text(keyword) 
      .attr("x", x) 
      .attr("y", y) 
      .style("fill", "gold") 
      .style("font-size", "10px") 
      .transition() 
      .duration(40) 
      .style("opacity", 0) 
      .remove(); 
} 

爲了讓更多的背景下，我試圖做這樣的網站http://tweetping.net/東西在這個頁面中我看到一個沒有被添加每個點放置在地圖上新的DOM元素，我在尋找的東西類似。

Answer 1

您提到的頁面使用canvas元素而不是svg或d3.js.你可能想看看

• fabricjs
• paperjs
• kinectjs

Answer 2

@ VivekKumarBansal的建議的補充說明：一般的規則是，SVG減慢會陸續添加更多的元素，但使較大或較小的圖像不會影響速度。畫布不會因爲添加更多元素而變慢，但增加的大小確實會減慢它的速度。 d3.js可以與Canvas一起使用，但在SVG中使用它似乎更常見。