Chrome 上的 D3 地图平移和缩放性能

Question

为了方便起见，这里是我所拥有的 JSFiddle。

尝试

在 FireFox（版本 35.0.1）中平移地图。单击并按住地图上的任意位置，然后快速左右移动它。平移动作应该快速流畅。

现在在 Chrome 中尝试相同的操作，您会发现它并不那么流畅！有点jerky/laggy。我发现它在最新版本的 IE 和 Opera 中也很慢。

顺便说一句，如果你注释掉这个样式块，那么行为就会突然变得平滑并且不再迟钝！你当然不会得到一张漂亮的地图。

#map path {
    fill: #C9DCC9;
    stroke: #066860;
}

那又怎样？

首先，如果有人可以在他们的 PC 上确认此行为，我将不胜感激。我正在使用 Windows 8.1，所有最新更新。

然后，为什么在使用 D3 完成的其他地图上没有发生这种行为？ This one例如表现流畅！是不是和多边形的复杂度有关？

Answer 1

为了解决这个问题，我简化了地图的路径。我在 TopoJson.

上使用了 -simplification 函数

简化路径后，地图平移和缩放在Chrome、Firefox、Opera 和 IE 11 中非常流畅。

TopoJson 是一个节点包，因此您需要安装节点和 TopoJson 的许多其他依赖项才能使其在 windows 上运行。如果你幸运的话，它会在 Windows.

为你工作

我很不走运，所以我去创建了一个虚拟机运行 Ubuntu 在那里，节点设置变得非常容易，我设法在 5 分钟内完成了我想做的事情。与试图在 Windows.

上运行的天数相比

无论如何，希望这对您有所帮助。 :)

D3 Map Pan and Zoom Performance on Chrome