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

问题描述：

我有一个应用程序，可以在D3中绘制世界地图，并使用来自不同来源的经度和纬度数据将它们绘制在地图上。目前我从很多google'ing中学到的是，我可以通过将“circle”附加到SVG来绘制点，它在我的网页打开后的前15到20秒内工作正常，后来一切都变得缓慢和草率。向SVG添加更多圈子会大幅降低性能

我不确定如何保持页面性能不错，并且不会为每一个添加了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元素，我在寻找的东西类似。

答

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

fabricjs
paperjs
kinectjs

答

@ VivekKumarBansal的建议的补充说明：一般的规则是，SVG减慢会陆续添加更多的元素，但使较大或较小的图像不会影响速度。画布不会因为添加更多元素而变慢，但增加的大小确实会减慢它的速度。 d3.js可以与Canvas一起使用，但在SVG中使用它似乎更常见。

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

相关推荐