我正在尝试显示单个状态的地图,缩放和平移约束到状态的边界.它主要工作,除了平移约束时状态路径缩放以适应较小的容器.我认为这归结于我不理解用于zoom.translateExtent的参数(尽管我对此非常新,所以它可能是其他的东西).
Live example on bl.ocks.org,with links to prior art.
一个值得注意的事情是我正在为d3.geoPath使用空投影,因为我使用ogr2ogr在每个状态的投影坐标中生成shapefile.这就是我使用缩放变换使地图适合其容器的原因.
解决方法
@ McGiogen的解决方案几乎是正确的但是错过MIN需要根据缩放比例因子transform.k而变化.
我绘制了一个图表,看看我是如何将我的svg限制为始终包含在缩放视图中的(在我的绘图中描绘为框的最大部分,其中只有一部分对用户可见)：
(因为约束x kw> = w等于x> =(1-k)w,y的类似参数
因此假设你的svg容器大小[w,h]：
function zoomed() {
var t = d3.event.transform;
t.x = d3.min([t.x,0]);
t.y = d3.min([t.y,0]);
t.x = d3.max([t.x,(1-t.k) * w]);
t.y = d3.max([t.y,(1-t.k) * h]);
svg.attr("transform",t);
}
