D3 Map Pan and Zoom Performance on Chrome

Question

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

TRY

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.

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?

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.

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?

Answer 1

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

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

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.

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. :)