Question

我有一个应用程序，我用D3绘制世界地图，我使用来自不同来源的纬度和经度数据在地图上绘制它们。目前我从很多谷歌中学到的是，我可以通过追加＆＃34; circle＆＃34;来绘制积分。到我的网页打开后的第一个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元素，我正在寻找一些东西类似。

Answer 1

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

Answer 2

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

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

2 个答案: