D3.js - 如何使用默认的wheelmouse缩放行为添加缩放按钮 [英] D3.js - how to add zoom button with the default wheelmouse zoom behavior

问题描述

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

So I got a worldmap with mouse zoom using the default d3.behavior.zoom() and limits to prevent the map from being dragged completely out of the page. This was a pain to get working, but it now work.

我现在的问题是这个项目还需要在界面中使用无用的缩放+和 - 按钮，我可以'找到了两种缩放类型的例子。它只是鼠标缩放或只是按钮缩放。

My problem now is that this project also require useless zoom + and - button in the interface and I can't found example featuring both type of zoom. It's either mouse zoom only or a crappy zoom by button only.

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

I tried simply calling zoom.scale(newScale); but it don't update anything. I seem to be on the right track since in the console you can see that the scale is updated but it don't update and when I zoom with the mouse it suddenly skip to the scale that was defined using the button. But it seem I also need to update the translate and I'm not sure how to get like the center of the map and calculate the translate needed to zoom to there.

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

I also need to know how to update the projection after calling zoom.scale(newScale); if it's the way to do that.

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

I made a simplified demo with zoom button obviously not working right now. http://bl.ocks.org/jfmmm/f5c62bc056e557b80447

谢谢！

编辑：
现在关闭，它缩放到地图的中心因为我使用了同样的计算我用来计算屏幕的中间部分，但是用新的比例计算。问题是我希望它放大屏幕中间的对象，而不是地图中间的国家。

edit: So close now, it zoom to the center of the map because I use the same calculation I used to calculate the middle of the screen, but whit the new scale. The problem is that I want it to zoom on the object in the middle of the screen, not always the country at the middle of the 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);
        }
    }
}

我会更新我的例子在最小值。

i'll update my example in a min.

推荐答案

放大到屏幕中心的数学运算，而不是左上角或0lat / 0lon，对于正确的方法来说相当棘手。我正在从 Wil Linssen的例子中复制它并将其嫁接到Mike Bostock的 Map Pan&放大I 。重要的是，该示例使用SVG变换来重新渲染地图，而不是不断地重新计算投影。您可以通过以下几种方式使用这些按钮：

The math for zooming in to the center of the screen, and not towards the top-left corner or 0lat/0lon, is fairly tricky to get right. I'm copying it from Wil Linssen's example and grafting it on to Mike Bostock's Map Pan & Zoom I. Importantly, that example uses SVG transforms to rerender the map, rather than recomputing the projection constantly. There are a few ways you might want the buttons to work:

• 缩放按钮I - 按下按钮会转换到新视图。按住按钮不会重新开始转换。

• Zoom Buttons I - Pressing a button causes a transition to the new view. Holding the button down does not restart the transition.

Zoom Buttons II - 按住按钮可使新视图每40ms更新一次。这会导致令人不快的跳跃，特别是在反复点击按钮时。

Zoom Buttons II - Pressing and holding the button causes the new view to be updated immediately, every 40ms. This leads to unpleasant jumps, especially when clicking the button repeatedly.

缩放按钮III - 100ms链接转换，一直持续到按钮不再保持或达到scaleExtent为止。控制逻辑可防止任何不希望的即时平移。这是一个可以使用的。

Zoom Buttons III - 100ms chained transitions that continue until the button is no longer held or the scaleExtent is met. Control logic prevents any undesirable instant panning. This is the one to use.

再一次，获取正确的细节是棘手的，这就是我提供的原因完整的例子。但令人满意的是，核心逻辑确实有意义。你将一个向量归零，拉伸它并将其解除零：

Again, getting the details right is tricky, which is why I'm providing full examples. But satisfyingly, the core logic does make sense. You're zeroing a vector, stretching it, and unzeroing it:

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

这篇关于D3.js - 如何使用默认的wheelmouse缩放行为添加缩放按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！