D3在Chrome上映射平移和缩放性能 [英] D3 Map Pan and Zoom Performance on Chrome

问题描述

为了简化操作，这里有一个 JSFiddle 我所拥有的。

To make things easier, here is a JSFiddle of what I have.

TRY

在FireFox（版本35.0.1）中，平移地图。点击并按住地图上的任意位置，然后快速向左和向右移动。平移运动应该快速顺利。

In FireFox (version 35.0.1) pan the map. Click and hold anywhere on the map, and move it about quickly left and right. Panning movement should be quick and smooth.

现在，在Chrome中尝试一样，你会发现它不是那么流畅！这是一个有点干的/滞后。我发现它在最新版本的IE和Opera太累了。

Now try the same in Chrome and you'll see that it is not as smooth! It is a bit jerky/laggy. I find it laggy in the latest version of IE and Opera too.

顺便说一下，如果你注释掉这个样式块，然后行为突然平滑，停止是滞后！你当然不会得到一个漂亮的地图。

By the way, if you comment out this style block, then behaviour all of a sudden smooths out and stops being laggy! You won't get a nice map of course.

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

SO WHAT？

首先我要感谢，如果有人可以在他们的电脑上确认这个行为。我在Windows 8.1上有所有最新的更新。

First of all I would appreciate it if someone can confirm this behaviour on their PCs. I am on Windows 8.1 with all latest updates.

然后，为什么不是这种行为发生在其他地图做D3？ 这一个例如表现得很顺利！

And then, why isn't this behaviour happening on other maps done with D3? This one for example behaves smoothly! Is it to do with the complexity of the polygons?

推荐答案

为了解决这个问题，我简化了地图的路径。我使用 TopoJson 上的 -simplification 功能。

To fix this, I simplifed the paths of the map. I used the -simplification function on TopoJson.

简化路径后，地图平移和缩放在Chrome，Firefox，Opera和IE 11中超平滑。

After the simplification of the paths, the map panning and zooming was super smooth in Chrome, Firefox, Opera and IE 11.

TopoJson是一个节点包，所以你需要为TopoJson安装节点和许多其他依赖，以使它在Windows上工作。如果你很幸运，它会在Windows上为你工作。

TopoJson is a node package, so you would need to install node and a lot of other dependencies for TopoJson to get it working on windows. If you're lucky it'll work for you on Windows.

我不幸运，所以我去创建一个虚拟机运行Ubuntu，在那里，节点设置是soo更容易，我设法做我想要在5分钟内。与尝试在Windows上执行此操作的天数相比。

I was unlucky so I went and created a Virtual Machine running Ubuntu and in there, the node setup was soo much easier, I managed to do what I wanted in 5 minutes. Compared to days attempting to get this working on Windows.

反正，希望这有帮助。 ：）

Anyways, hope this helps. :)

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