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

Question

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

我从这开始:

然后调整一下这个:

但是,我想要做的是在创建时自动平移/缩放地图,使状态在显示器的前面和中心,如下所示:

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

Answer 1

我发现,解决此问题的最简单方法是根据您要缩放到的状态的边界框,对g包含状态的元素(#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 + ")");
    });

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