如何让我的D3地图缩放至指定位置？

Question

我正在使用D3，并且到目前为止，我已经成功地将颜色地图示例调整为仅绘制特定州。这就是简单地删除所有其他多边形数据，以便只剩下我需要的州。

我从这个开始： 然后调整为这样： 但是，我想做的是在创建地图时自动平移/缩放地图，使该州位于显示器的正中心，就像这样： 我应该通过D3库实现这个效果吗？还是需要一些独立的代码（我目前正在使用jquery-svgpan和d3进行手动平移/缩放）才能实现这一点？

- Dillie-O

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 + ")");
    });

在这里，您可以做更多的事情来清理它 - 给最终缩放一些余量，检查是否应该基于宽度或高度进行缩放，根据缩放改变描边宽度，动画过渡等等 - 但这就是基本概念。

- nrabinowitz

---

太好了！前几天我在D3网站上找到了一些转换代码，这对我的国家视图有所帮助，但我会将其应用到我的各个州的视图中，并告诉你结果。 - Dillie-O

当d3加载完地图后，我该如何调用我的比例/变换？我将知道我需要获取边界框的特定路径（我正在应用Ids），我希望立即获得更大的视图，而不是依赖于单击事件。由于我只渲染单个路径，我可以使用.enter方法而不是.on方法吗？我仍在适应D3。 - Dillie-O

你可以这样做，但通常这是在更新时需要执行的操作，因为每次想要更改状态或缩小视图时都需要重新执行。 - nrabinowitz