如何通过D3.js实现点击SVG元素时缩放并将其居中到视口？

嘿，我完全懂你作为D3新手的困惑——那个示例用JSON数据，而你用的是内联SVG，确实容易搞混哪些代码对应缩放居中功能。别担心，我们直接针对你的内联SVG场景来实现点击分区缩放居中的功能，步骤很清晰：

核心思路 #

我们会用D3的zoom行为来统一处理缩放和平移（可以和你现有的jquery-svgpan配合，或者替换它实现更统一的交互），然后给每个分区绑定点击事件：点击时计算分区的中心位置，算出合适的缩放比例，再通过平滑过渡把这个分区居中显示在视口内。

具体代码修改 #

把下面的代码添加到你的HTML里，放在</body>标签之前（用jQuery的DOM就绪包裹，确保SVG加载完成后执行）：

<script type="text/javascript">
$(document).ready(function() {
    // 选择SVG和视口元素
    var svg = d3.select("svg");
    var viewport = svg.select("#viewport");

    // 初始化D3缩放行为，支持滚轮缩放和拖拽平移
    var zoom = d3.behavior.zoom()
        .scaleExtent([1, 10]) // 限制缩放范围：最小1倍，最大10倍，可按需调整
        .on("zoom", function() {
            // 应用缩放和平移到视口
            viewport.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
        });

    // 把缩放行为绑定到SVG上
    svg.call(zoom);

    // 给所有分区（带cls-1类的rect）绑定点击事件
    svg.selectAll(".cls-1")
        .on("click", function() {
            var rect = d3.select(this);
            
            // 获取当前分区的位置和尺寸
            var x = parseFloat(rect.attr("x"));
            var y = parseFloat(rect.attr("y"));
            var width = parseFloat(rect.attr("width"));
            var height = parseFloat(rect.attr("height"));
            
            // 计算分区的中心坐标（基于原始SVG坐标系）
            var rectCenterX = x + width / 2;
            var rectCenterY = y + height / 2;
            
            // 获取SVG容器的可视尺寸
            var svgWidth = svg.node().clientWidth;
            var svgHeight = svg.node().clientHeight;
            
            // 计算目标缩放比例：让分区宽度占SVG可视宽度的80%，保证分区不会超出视口
            var targetScale = 0.8 * svgWidth / width;
            // 确保缩放比例在我们设置的范围内
            targetScale = Math.max(zoom.scaleExtent()[0], Math.min(zoom.scaleExtent()[1], targetScale));
            
            // 计算目标平移量：让分区中心和SVG容器中心对齐
            var targetTranslateX = svgWidth / 2 - rectCenterX * targetScale;
            var targetTranslateY = svgHeight / 2 - rectCenterY * targetScale;
            
            // 用750ms的平滑过渡实现缩放居中效果
            svg.transition()
                .duration(750)
                .call(zoom.translate([targetTranslateX, targetTranslateY]).scale(targetScale).event);
        });
});
</script>

关键细节解释 #

• 缩放范围控制：scaleExtent([1,10])可以防止用户缩得太小或太大，你可以根据你的地图大小调整数值。
• 目标缩放比例：这里用分区宽度占视口80%来计算，你也可以换成高度（比如0.8 * svgHeight / height），取决于你的地图布局是宽型还是高型。
• 平滑过渡：duration(750)设置动画时长，让缩放和移动更自然，你可以改成500或1000调整快慢。
• 坐标计算：我们基于原始SVG坐标计算分区中心，然后通过D3的zoom的translate和scale来调整视口位置，确保分区居中。

注意事项 #

如果发现jquery-svgpan和D3的zoom有冲突（比如拖拽行为重复），建议直接移除jquery-svgpan，因为D3的zoom已经支持滚轮缩放和拖拽平移功能，这样交互更统一。

内容的提问来源于stack exchange，提问作者souzan