D3.js - 如何添加具有默认滚轮鼠标缩放行为的缩放按钮

因此，我使用默认的 d3.behavior.zoom() 获得了带有鼠标缩放的世界地图，并进行了限制以防止地图被完全拖出页面。开始工作时很痛苦，但现在可以了。

我现在的问题是，这个项目还需要界面中无用的缩放 + 和 - 按钮，并且我找不到具有两种缩放类型的示例。它要么只是鼠标缩放，要么是仅通过按钮进行蹩脚缩放。

我尝试简单地调用 Zoom.scale(newScale);但它不更新任何东西。我似乎走在正确的轨道上，因为在控制台中您可以看到比例已更新，但它没有更新，当我用鼠标缩放时，它突然跳到使用按钮定义的比例。但似乎我还需要更新翻译，我不确定如何接近地图的中心并计算缩放到那里所需的翻译。

我还需要知道如何在调用 Zoom.scale(newScale); 后更新投影如果这是这样做的方法的话。

我制作了一个带有缩放按钮的简化演示，显然现在不起作用。http://bl.ocks.org/jfmmm/f5c62bc056e557b80447 http://bl.ocks.org/jfmmm/f5c62bc056e557b80447

Thanks!

编辑： 现在如此接近，它缩放到地图的中心，因为我使用与计算屏幕中间相同的计算，但使用了新的比例。问题是我希望它放大屏幕中间的对象，而不总是地图中间的国家/地区。

function zoomBtn(action) {
    var currentZoom = zoom.scale();

    if( action == 'in' ){
        if(currentZoom < options.maxZoomLevel){
            var newScale = Math.floor(currentZoom) + 1;

            var b = path.bounds(mapFeatures);
            var t = [(width - newScale * (b[1][0] + b[0][0])) / 2, (height - newScale * (b[1][1] + b[0][1])) / 2];

            zoom.scale(newScale)
                .translate(t)
                .event(svg);
        }
    }else{
        if(currentZoom > options.minZoomLevel){
            var newScale = Math.floor(currentZoom) - 1;

            var b = path.bounds(mapFeatures);
            var t = [(width - newScale * (b[1][0] + b[0][0])) / 2, (height - newScale * (b[1][1] + b[0][1])) / 2];

            zoom.scale(newScale)
                .translate(t)
                .event(svg);
        }
    }
}

我将在一分钟内更新我的示例。

放大到屏幕中心而不是左上角或 0 纬度/0 经度的数学计算是相当棘手的。我正在复制它威尔·林森的例子 http://bl.ocks.org/linssen/7352810并将其移植到迈克博斯托克的地图平移和缩放 I http://bl.ocks.org/mbostock/8fadc5ac9c2a9e7c5ba2。重要的是，该示例使用 SVG 变换来重新渲染地图，而不是不断重新计算投影。您可能希望按钮通过以下几种方式工作：

• 变焦按钮 I http://bl.ocks.org/mgold/c2cc7242c8f800c736c4- 按下按钮会转换到新视图。按住按钮不会重新启动转换。

• 变焦按钮 II http://bl.ocks.org/mgold/bbc451a7b9f902954e7c- 按住按钮会导致新视图立即更新，每 40 毫秒更新一次。这会导致令人不快的跳跃，尤其是在重复单击按钮时。

• 变焦按钮 III http://bl.ocks.org/mgold/f61420a6f02adb618a70- 持续 100 毫秒的链式转换，直到不再按住按钮或满足scaleExtent。控制逻辑可防止任何不需要的即时平移。这是要使用的。

同样，获得正确的细节是很棘手的，这就是我提供完整示例的原因。但令人欣慰的是，核心逻辑确实有意义。您将向量归零，拉伸它，然后将其取消归零：

x = (x - center[0]) * factor + center[0];
y = (y - center[1]) * factor + center[1];