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

Question

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

我从这个开始：

然后对此进行了调整：

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

我是否通过 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 + ")");
    });

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