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

Question

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

我从这开始：

然后调整到这个：

但是，我想要做的是在创建时自动平移/缩放地图，以便状态在显示屏的前面和中心，如下所示：

我是否通过D3库执行此操作？或者一些独立的代码（我目前使用d3运行jquery-svgpan以允许手动平移/缩放）以实现这一目标？

Answer 1

我发现，解决此问题的最简单方法是根据边界框设置包含状态g的{​​{1}}元素的变换（示例中为#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 + ")");
    });

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