If you are going to zoom/pan the superimposed SVG's, Include both svg's in a <g>
container element and attach zoom behavior to the <g>
container.
Essentually, you will have:
<svg id=topSVG>
<g id=container>
<svg id=projection1>
....
</svg>
<svg id=projection2>
....
</svg>
</g>
</svg>
Below is a snippet relating to my mouswheel zoom for d3:
var myZoom=d3.behavior.zoom().scaleExtent([.1, 1000]).on("zoom", mouseWheelZoom)
function callZoomBehavior()
{
//---attach to root svg---
d3.select("#"+SVGId)
.call(myZoom)
//---reset from previous file call---
myZoom.translate([0,0])
myZoom.scale(1)
PrevScale=1
}
var PrevScale //--previous scale event---
function mouseWheelZoom()
{
//--place in d3 object--
var zoomG=d3.select("#topZoomG")
if(PrevScale!=d3.event.scale) //--transition on scale change--
{
zoomG.transition().attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")
}
else //--no transition on pan---
{
zoomG.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")
}
PrevScale=d3.event.scale
}