Overlay d3 paths onto Google Maps?

Question

I'm trying to overlay a map onto Google Maps using d3.geo and GeoJson. I've managed to force d3 to use the Google Map's projection for drawing the paths, which was surprisingly easy. Here's what I have so far:

http://www.caudillweb.com/temp/d3_choropleth.html

This works well as I zoom in and out:

But when I pan, the SVG overlay moves too, and since its size is fixed, the shapes get truncated:

Has anyone gotten something like this to work? Any ideas where I could go from here? The above example is a single self-contained HTML file if anyone wants to play with it.

Answer 1

In this example the width and height of the svg are set to 8000 x 8000, which seemed to be OK up to about zoom level 9-10. The top and left are set to -4000 x -4000 to center it. Finally, the projection is shifted/offset so that it draws in the center of the svg:

Enlarge and center the svg:

.SvgOverlay svg {     position: absolute;     top: -4000px;     left: -4000px;     width: 8000px;     height: 8000px;         } 

Offset the projection:

return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];