d3.js - 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];