d3js：使用视图端口中心缩放焦点 [英] d3js: Use view port center for zooming focal point

问题描述

我们正在尝试在D3中创建的地图上实施缩放按钮 - 基本上就像在Google地图上工作一样。缩放事件可以通过编程方式使用

We are trying to implement zoom buttons on top of a map created in D3 - essentially as it works on Google maps. The zoom event can be dispatched programmatically using

d3ZoomBehavior.scale(myNewScale);
d3ZoomBehavior.event(myContainer);

，地图将使用视图的当前翻译进行缩放。如果使用缩放按钮，焦点（缩放中心）不再是平移，而是视口的中心。对于使用滚轮的缩放，我们可以选择使用 zoom.center - 但是这显然在分派您自己的事件时没有效果。

and the map will zoom using the current translation for the view. If using zoom buttons the focal point (zoom center) is no longer the translation but the center of the view port. For zoom using the scroll wheel we have the option of using zoom.center - but this apparently have no effect when dispatching your own event.

我很困惑如何计算下一个翻译考虑新的缩放因子和视图港口中心。

I'm confused as to how a calculate the next translation taking the new scaling factor and the view port center into account.

由于我知道当前比例，下一个比例，当前平移和地图视口的尺寸如何计算下一个翻译，这样视口的中心不会改变？

Given that I know the current scale, the next scale, the current translation and the dimensions of the map view port how do I calculate the next translation, so that the center of the view port do not change?

推荐答案

我发现这在实践中很难做。我这里的方法是简单地创建一个鼠标事件，触发缩放时缩放按钮。此活动是在地图中心创建的。

I've found this to be quite difficult to do in practice. The approach I've taken here is to simply create a mouse event that triggers the zoom when the zoom buttons are used. This event is created at the center of the map.

以下是相关代码：

.on("click", function() {
                var evt = document.createEvent("MouseEvents");
                evt.initMouseEvent(
                  'dblclick', // in DOMString typeArg,
                   true,  // in boolean canBubbleArg,
                   true,  // in boolean cancelableArg,
                   window,// in views::AbstractView viewArg,
                   120,   // in long detailArg,
                   width/2,     // in long screenXArg,
                   height/2,     // in long screenYArg,
                   width/2,     // in long clientXArg,
                   height/2,     // in long clientYArg,
                   0,     // in boolean ctrlKeyArg,
                   0,     // in boolean altKeyArg,
                   (by > 0 ? 0 : 1),     // in boolean shiftKeyArg,
                   0,     // in boolean metaKeyArg,
                   0,     // in unsigned short buttonArg,
                   null   // in EventTarget relatedTargetArg
                );
                this.dispatchEvent(evt);
            });

整个事情是有点黑客，但它在实践中工作，比计算每个偏移/缩放的正确中心要容易得多。

The whole thing is a bit of a hack, but it works in practice and I've found this much easier than to calculate the correct center for every offset/zoom.

这篇关于d3js：使用视图端口中心缩放焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！