D3.Geo在平移/缩放上的性能 [英] D3.Geo performance on Pan/Zoom

问题描述

去年，我使用（约500种形状），可以平滑地缩放和平移。

Last year I made a couple experiments on web maps using the Mapnik library (server-side, bitmap/tiling). Now I'm trying to replicate the same experiments using the vector, client-side approach with d3.js.

I have a map (~680 shapes) where zoom is slow and pan is sluggish (this example by Mike Bostock works well). I suspect the problem is in the zoommove callback, the selectAll("path").attr("d", path) takes too long.

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

Questions:

1. Am I doing something wrong here?
2. what can I do in order to optmize performance?

The map is this (jsfiddle here):

The datasource is in topojson format. It was simplified, may be already too much, because some shapes are not closing:

[UPDATE]

Looks like the problem with open geometries occurs even when running topojson without simplification flags, I'm still investigating. I would appreciate any clues here, the documentation is not very detailed.

解决方案

(I'm not super sure what's going on under the hood here, this might be totally wrong).

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

Redraws the map from scratch. That works fine for 50 states but starts to get pretty slow with 600+ shapes. You might have better luck if you left the paths in place and just transformed the entire svg:

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

Which I've used to create a county level map of the US (~500 shapes) that zooms and pans smoothly.

这篇关于D3.Geo在平移/缩放上的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！