D3.Pan/Zoom 上的 Geo 性能

Question

去年我使用Mapnik library（服务器端，位图/平铺）在网络地图上做了几个实验。现在我正在尝试使用带有 d3.js 的矢量客户端方法来复制相同的实验。

我有一张地图（约 680 个形状），其中zoom 很慢，pan 很慢（Mike Bostock 的this example 效果很好）。我怀疑问题出在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 here）：

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

[更新]

看起来即使在没有简化标志的情况下运行 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+")");
}

我用它来创建美国的county level map（约 500 个形状），可以平滑地缩放和平移。

Answer 2

在这里回答我自己的问题，如果您觉得这有帮助，请点赞亚当的回答，他值得称赞。

什么对我有用：

var bg = svg.append('g')
    .call(zoom);

var map = bg.append("g")
    .attr("transform", "translate(0,0) scale(1)");

...

function zoommove() {
    var t1 = projection.translate(),
        t2 = d3.event.translate,
        t = [t2[0]-t1[0], t2[1]-t1[1]];

    map.attr("transform", 
        "translate("+t+") " +
        "scale("+(d3.event.scale/s)+")"
    );
    console.log(map.attr("transform"));
}

一些提示：

• 如果projection.translate() 不是 [0, 0]，则必须考虑到这一点，否则在第一次尝试平移/缩放时（仅第一次）会出现很大的颠簸。
• 如果projection.scale() 不为1，则必须将其考虑在内。
• .call(zoom) 必须在 maps 父元素中，否则平移/缩放会变得颠簸。

Answer 3

我遇到过类似的问题，并且重新缩放不适合我的解决方案，因为我不希望 svg 元素本身被缩放。相反，我所做的是对其进行优化，以便不重新计算可见区域之外的元素。这意味着当所有元素都在视图中时性能仍然很差，但是当您放大时它会好很多。

颂歌示例：

clippedArea.selectAll("circle")
    .style("visibility", d => pointInDomain(d, domain) ? "visible" : "hidden")
    .filter(d => pointInDomain(d, domain))
  .attr("cx", d => xz(d.x));

JSFiddle