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

Question

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

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

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

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

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

谢谢!

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

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

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

Answer 1

放大到屏幕中心的数学运算，而不是朝向左上角或 0lat/0lon，要获得正确的结果相当棘手。我是从 Wil Linssen's example 复制的并将其移植到 Mike Bostock 的 Map Pan & Zoom I 上.重要的是，该示例使用 SVG 转换来重新渲染 map ，而不是不断地重新计算投影。您可能希望按钮以几种方式工作:

• Zoom Buttons I - 按下按钮会导致转换到新 View 。按住按钮不会重新开始转换。

• Zoom Buttons II - 按住按钮会导致新 View 每 40 毫秒立即更新一次。这会导致不愉快的跳转，尤其是在重复单击按钮时。

• Zoom Buttons III - 持续 100 毫秒的链式过渡，直到不再按住按钮或满足 scaleExtent。控制逻辑可防止任何不需要的即时摇摄。这是要使用的。

再次强调，获得正确的细节很棘手，这就是我提供完整示例的原因。但令人满意的是，核心逻辑确实有道理。您正在对一个向量进行归零、拉伸(stretch)和取消归零:

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