Map d3js：使用视图端口中心缩放焦点

我们正试图在D3中创建的地图上实现缩放按钮——基本上就像它在谷歌地图上工作一样。可以使用以下命令以编程方式调度缩放事件：

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

地图将使用视图的当前平移进行缩放。如果使用缩放按钮，焦点（缩放中心）不再是平移，而是视口的中心。对于使用滚轮进行缩放，我们可以选择使用

zoom.center

——但这显然对调度您自己的事件没有影响

我不知道如何计算下一个平移，并将新的比例因子和视口中心考虑在内

---

鉴于我知道地图视口的当前比例、下一个比例、当前平移和尺寸，如何计算下一个平移，以便视口的中心不发生变化？

我发现在实践中很难做到这一点。我所采取的方法是简单地创建一个鼠标事件，当使用缩放按钮时触发缩放。此事件在地图的中心创建

以下是相关代码：

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

---

整个过程有点困难，但它在实践中起作用，我发现这比为每个偏移/缩放计算正确的中心要容易得多。

我最近不得不做同样的事情，我这里有一个工作示例。基本上，它使用tween平滑地缩放到所需的目标比例，并在缩放到中心后通过计算所需的差值进行平移

我已经在下面介绍了它的要点，但它可能值得一看，以获得全面的效果

html

+
-

js

var zoom=d3.behavior.zoom（）.scaleExtent（[1,8]）。打开（“缩放”，缩放）；
函数缩放（）{
attr（“转换”，
“translate（“+zoom.translate（）+”）+
缩放（“+zoom.scale（）+”）
);
}
函数插值空间（平移、缩放）{
var self=这个；
返回d3.transition（）.duration（350）.tween（“缩放”，函数）（）{
var iTranslate=d3.interpolate（zoom.translate（），translate），
iScale=d3.插值（zoom.scale（），scale）；
返回函数（t）{
快速移动
.刻度（iScale（t））
.翻译（iTranslate（t））；
缩放（）；
};
});
}
函数zoomClick（）{
var clicked=d3.event.target，
方向=1，
系数=0.2，
目标缩放=1，
中心=[宽度/2，高度/2]，
extent=zoom.scaleExtent（），
translate=zoom.translate（），
translate0=[]，
l=[]，
视图={x:translate[0]，y:translate[1]，k:zoom.scale（）}；
d3.event.preventDefault（）；
方向=（this.id=='zoom_in'）？1:-1；
目标缩放=缩放比例（）*（1+因子*方向）；
if（target_zoomextent[1]）{return false；}
translate0=[（中间[0]-view.x）/view.k，（中间[1]-view.y）/view.k]；
view.k=目标\缩放；
l=[translate0[0]*view.k+view.x，translate0[1]*view.k+view.y]；
视图x+=中心[0]-l[0]；
视图y+=中心[1]-l[1]；
插值空间（[view.x，view.y]，view.k）；
}
d3.选择全部（'button'）。在（'click'，zoomClick'）上；

Wil解决方案的更简洁版本：

  var vis = d3.select('.vis');
  var zoom = d3.behavior.zoom()...
  var width = .., height = ..;

  function zoomByFactor(factor) {
    var scale = zoom.scale();
    var extent = zoom.scaleExtent();
    var newScale = scale * factor;
    if (extent[0] <= newScale && newScale <= extent[1]) {
      var t = zoom.translate();
      var c = [width / 2, height / 2];
      zoom
        .scale(newScale)
        .translate(
          [c[0] + (t[0] - c[0]) / scale * newScale, 
           c[1] + (t[1] - c[1]) / scale * newScale])
        .event(vis.transition().duration(350));
    }
  };

  function zoomIn() { zoomByFactor(1.2); }
  function zoomOut() { zoomByFactor(0.8); }

var-vis=d3.选择（'.vis'）；
var zoom=d3.behavior.zoom（）。。。
变量宽度=…，高度=。。；
函数缩放因子（因子）{
var scale=zoom.scale（）；
var extent=zoom.scaleExtent（）；
var newScale=比例*因子；
if（区段[0]mbostock现在有一个聚焦于中心的缩放按钮示例（2015年4月9日）：嘿，Wil，你能看看这个问题吗，它是基于你的实现的，但在d3版本4中，看起来你在过渡期间解决了它，@Vladyslavabenko？是的，谢谢你，这不是很明显，v4 api很混乱。我可以用v4实现，也可以运行你的示例）伊利亚，你能看一下这个问题吗，它是相同的实现，但与d3版本4…谢谢
var zoom = d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoomed);

function zoomed() {
    svg.attr("transform",
        "translate(" + zoom.translate() + ")" +
        "scale(" + zoom.scale() + ")"
    );
}

function interpolateZoom (translate, scale) {
    var self = this;
    return d3.transition().duration(350).tween("zoom", function () {
        var iTranslate = d3.interpolate(zoom.translate(), translate),
            iScale = d3.interpolate(zoom.scale(), scale);
        return function (t) {
            zoom
                .scale(iScale(t))
                .translate(iTranslate(t));
            zoomed();
        };
    });
}

function zoomClick() {
    var clicked = d3.event.target,
        direction = 1,
        factor = 0.2,
        target_zoom = 1,
        center = [width / 2, height / 2],
        extent = zoom.scaleExtent(),
        translate = zoom.translate(),
        translate0 = [],
        l = [],
        view = {x: translate[0], y: translate[1], k: zoom.scale()};

    d3.event.preventDefault();
    direction = (this.id === 'zoom_in') ? 1 : -1;
    target_zoom = zoom.scale() * (1 + factor * direction);

    if (target_zoom < extent[0] || target_zoom > extent[1]) { return false; }

    translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k];
    view.k = target_zoom;
    l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y];

    view.x += center[0] - l[0];
    view.y += center[1] - l[1];

    interpolateZoom([view.x, view.y], view.k);
}

d3.selectAll('button').on('click', zoomClick);

  var vis = d3.select('.vis');
  var zoom = d3.behavior.zoom()...
  var width = .., height = ..;

  function zoomByFactor(factor) {
    var scale = zoom.scale();
    var extent = zoom.scaleExtent();
    var newScale = scale * factor;
    if (extent[0] <= newScale && newScale <= extent[1]) {
      var t = zoom.translate();
      var c = [width / 2, height / 2];
      zoom
        .scale(newScale)
        .translate(
          [c[0] + (t[0] - c[0]) / scale * newScale, 
           c[1] + (t[1] - c[1]) / scale * newScale])
        .event(vis.transition().duration(350));
    }
  };

  function zoomIn() { zoomByFactor(1.2); }
  function zoomOut() { zoomByFactor(0.8); }