Question

我们正在尝试在D3中创建的地图上实现缩放按钮 - 基本上它适用于Google地图。可以使用

以编程方式调度zoom事件

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

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

我很困惑如何计算考虑新比例因子和视口中心的下一次翻译。

鉴于我知道当前比例，下一个比例，当前转换和地图视图端口的尺寸，如何计算下一个转换，以便视口的中心不会改变？

Answer 1

我最近不得不做同样的事情，我在这里有一个有效的例子http://bl.ocks.org/linssen/7352810。基本上它使用补间平滑地缩放到所需的目标比例，并通过在缩放到中心后计算所需的差异进行平移。

我在下面列出了它的要点，但是可能值得看the working example以获得完整的效果。

HTML

<button id="zoom_in">+</button>
<button id="zoom_out">-</button>

JS

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

Answer 2

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

Answer 3

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

以下是相关代码：

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

整个事情有点像黑客，但它在实践中有效，我发现这比为每个偏移/缩放计算正确的中心要容易得多。

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

3 个答案: