D3.Geo在平移/缩放上的表现

Question

去年,我使用Mapnik库(服务器端,位图/平铺)在Web地图上进行了几次实验.现在,我正在尝试使用d3.js的向量,客户端方法复制相同的实验.

我有一张地图(约680个形状),这里zoom很慢而且pan很迟钝(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...');
}

问题:

1. 我在这里做错了吗？
2. 我该怎么做才能优化表现？

地图是这个(这里是jsfiddle):

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

[UPDATE]

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

Answer 1

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

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

从头开始重绘地图.这适用于50个州,但开始变得相当缓慢,600多个形状.如果你把路径留在原地并且只是改变了整个svg,你可能会有更好的运气:

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

我曾经用它来创建美国的县级地图(约500个形状),可以平滑地缩放和平移.