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:
- Am I doing something wrong here?
- 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屋!