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

因此，我使用默认的d3.behavior.zoom（）和限制获得了一个带有鼠标缩放的世界地图，以防止地图被完全拖出页面。这是一个痛苦的开始工作，但它现在的工作

我现在的问题是，这个项目还需要无用的缩放+和-按钮在界面上，我找不到的例子具有这两种类型的缩放。它要么是鼠标缩放，要么是按钮缩放

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

我还需要知道在调用zoom.scale（newScale）之后如何更新投影；如果是这样的话

我做了一个带有缩放按钮的简化演示，显然现在不起作用。

谢谢

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

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

函数缩放（动作）{
var currentZoom=zoom.scale（）；
如果（操作=='in'）{
如果（currentZoomoptions.minZoomLevel）{
var newScale=数学地板（currentZoom）-1；
var b=路径边界（mapFeatures）；
var t=[（宽度-新标度*（b[1][0]+b[0][0]））/2，（高度-新标度*（b[1][1]+b[0][1]））/2]；
缩放比例（新闻比例）
.翻译（t）
.事件（svg）；
}
}
}

---

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

放大到屏幕中心，而不是左上角或0lat/0lon的数学方法很难正确。我从迈克·博斯托克那里复制并移植到他那里。重要的是，该示例使用SVG转换来重新渲染地图，而不是不断地重新计算投影。有几种方法可以让按钮正常工作：

• -按下按钮可转换到新视图。按住按钮不会重新启动转换

• -按住按钮可立即更新新视图，每40毫秒更新一次。这会导致不愉快的跳跃，尤其是在反复单击按钮时

• -100毫秒链式转换，持续到不再按住按钮或满足scaleExtent。控制逻辑可防止任何不需要的即时平移。这是一个使用

同样，正确地理解细节是很棘手的，这就是我提供完整示例的原因。但令人满意的是，核心逻辑确实有道理。将向量归零、拉伸和取消归零：

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

---

可以使用zoom.event（svg）更新投影。看到了吗，这在zoom thx上非常有效！现在我的问题是它会缩放到地图的左上角。如何将其设置为缩放到中心？zoom.translate还是zoom.center？如何获取中心位置。mbostock现在有一个聚焦于中心的缩放按钮示例（2015年4月9日）：bl.ocks.org/mbostock/7ec977c95910dd026812当我尝试此操作时，我得到了“ReferenceError:center is not defined”（参考错误：未定义中心）查看示例中的定义。最后两行是摘录。我现在用的是Ilya的这一行，它在没有中心的情况下工作。所以它很好=）是的，他称之为

c

，我称之为

center

。啊，好吧，你在最上面声明了它。好吧，我没看到，对不起。