Javascript 向SVG添加更多的圆圈会大大降低性能

我有一个应用程序，我用D3绘制一张世界地图，我使用来自不同来源的纬度和经度数据在地图上绘制它们。目前，我从谷歌上学到的是，我可以通过在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();
}

---

为了提供更多的上下文，我尝试在这个页面中做一些类似于此站点的事情。我看到没有为地图中的每个点添加新的DOM元素，我正在寻找类似的内容。

您提到的页面使用canvas元素，而不是svg或d3.js。你可能想调查一下

---

对@VivekKumarBansal建议的进一步澄清：一般规则是SVG会随着添加更多元素而变慢，但使图像变大或变小并不影响速度。画布不会随着添加更多元素而变慢，但增加大小确实会变慢。d3.js可以与Canvas一起使用，尽管与SVG一起使用似乎更常见