如何让我的D3地图缩放到某个位置?

我正在使用D3,到目前为止,我已经能够调整chloropleth示例以仅绘制特定状态。 这只涉及删除所有其他多边形数据,以便我留下我需要的状态。

我从这开始: 在此处输入图像描述

然后调整到这个: 在此处输入图像描述

但是,我想要做的是在创建时自动平移/缩放地图,以便状态在显示器的前面和中心,如下所示: 在此处输入图像描述

我是通过D3库完成的吗? 或者一些独立的代码(我目前使用d3运行jquery-svgpan以允许手动平移/缩放)以实现这一目标?

我发现,解决这个问题的最简单方法是根据你要缩放到的状态的边界框,在包含状态的g元素( #states中为#states )上设置变换:

 // your starting size var baseWidth = 600; d3.selectAll('#states path') .on('click', function(d) { // getBBox() is a native SVG element method var bbox = this.getBBox(), centroid = [bbox.x + bbox.width/2, bbox.y + bbox.height/2], zoomScaleFactor = baseWidth / bbox.width, zoomX = -centroid[0], zoomY = -centroid[1]; // set a transform on the parent group element d3.select('#states') .attr("transform", "scale(" + scaleFactor + ")" + "translate(" + zoomX + "," + zoomY + ")"); }); 

你可以在这里做更多的事情来清理它 – 为最终变焦提供一些余量,检查是否应该根据宽度或高度进行缩放,根据缩放更改笔划宽度,为过渡设置动画等等 – 但这就是基本概念。