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

【问题标题】：How do I get my D3 map to zoom to a location?如何让我的 D3 地图缩放到某个位置？
【发布时间】：2012-09-10 03:44:38
【问题描述】：

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

我从这个开始：

然后对此进行了调整：

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

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

【问题讨论】：

标签： jquery zooming d3.js pan

【解决方案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 + ")");
    });

您可以在此处进行更多清理工作 - 为最终缩放留出一些边距，检查是否应根据宽度或高度进行缩放，根据缩放更改笔触宽度，为过渡设置动画等 -但这是基本概念。

【讨论】：

太棒了！前几天我在 D3 网站上发现了一些转换代码，这对我的国家观点有所帮助，但我会在我的个人状态视图中处理这些代码并让你知道。
d3 加载完地图后如何调用我的比例/变换？我会知道获取边界框所需的特定路径（我正在应用 Id），并且我想立即获得更大的视图，而不是依赖单击事件。由于我只渲染一个路径，我可以使用 .enter 方法而不是 .on 吗？我还在习惯 D3
您可以，但通常这是您在更新时要做的事情，因为您需要在任何时候想要更改状态或缩小时再做一次。