2

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

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

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

我对如何在考虑新的比例因子和视口中心的情况下计算下一个平移感到困惑。

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

4

3 回答 3

11

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

我在下面包含了它的要点，但可能值得看一下工作示例以获得完整效果。

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);
于 2013-11-07T11:08:28.010 回答
8

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); }
于 2014-02-08T23:17:54.993 回答
3

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

以下是相关代码：

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

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

于 2013-08-28T13:45:00.077 回答