d3.js - D3. 平移/缩放上的地理性能

Question

去年，我使用 Mapnik library 对网络 map 进行了几次实验。 (服务器端，位图/平铺)。现在，我正在尝试使用向量、客户端方法和 d3.js 来复制相同的实验。

我有一张 map (~680 个形状)，其中 zoom很慢而且pan是缓慢的( this example by Mike Bostock 运行良好)。我怀疑问题出在 zoommove回调，selectAll("path").attr("d", path)需要太长时间。

function zoommove() {
    projection.translate(d3.event.translate).scale(d3.event.scale);
    mapa.selectAll("path").attr("d", path);
    console.log('zoommove fired...');
}

问题 :

我在这里做错了吗？

我该怎么做才能优化性能？

map 是这样的(jsfiddle here):



数据源采用 topojson 格式。它被简化了，可能已经太多了，因为有些形状没有闭合:



[更新]

看起来即使在没有简化标志的情况下运行 topojson 时也会出现开放几何的问题，我仍在调查中。我很感激这里的任何线索，文档不是很详细。

Answer 1

(我不太确定这里发生了什么，这可能是完全错误的)。

mapa.selectAll("path").attr("d", path);

从头开始重绘 map 。这适用于 50 个州，但对于 600 多个形状开始变得非常缓慢。如果您将路径留在原地并转换整个 svg，您可能会更幸运:

function zoommove() {
  svg.attr("transform",
      "translate("+d3.event.translate+")"
      + " scale("+d3.event.scale+")");
}

我用它来创建一个 county level map平滑缩放和平移的美国(约 500 个形状)。