javascript - 手动设置平移和缩放后更新 d3 v4 中的缩放状态

Question

这可能已经被问过很多次了，但作为 d3 的菜鸟，我无法得到明确的解决方案。

我有一张 map ，上面有很多点。当我单击一个点时，我想缩放和平移到它。到目前为止一切顺利，但是当我尝试再次拖动和/或缩放它时，它重置为 zoomIdentity 而不是保留我手动设置的值。

编辑:这是一个工作演示:https://codepen.io/brunofenzl/pen/pLxbjZ

我的代码的相关部分:

// zoom initialization
this.zoom = d3.zoom()
      .scaleExtent([1, 2])
      .translateExtent([[0, 0], [width, height]])
      .on('zoom', this.zoomed);



// zoom listener

Map.prototype.zoomed = function zoomed() {
    if (d3.event) {
      this.view.attr('transform', d3.event.transform);
    }
  }


// the function that zooms in
  Map.prototype.selectFeature = function selectFeature(el) {

    this.active = d3.select(el);

    const bounds = this.active.node().getBBox();

    const dx = bounds.width;
    const dy = bounds.height;
    const x = bounds.x + (bounds.width / 2);
    const y = bounds.y + (bounds.height / 2);

    const scale = Math.max(1, Math.min(8, 0.9 / Math.max(dx / this.width, dy / this.height)));
    const translate = [(this.width / 2) - (scale * x), (this.height / 2) - (scale * y)];

    this.view.transition()
        .duration(750)
        .attr("transform", "translate(" + translate + ")scale(" + scale + ")");

    return null;
  }

这两天我一直在尝试不同的解决方案，但无法正常工作。

非常感谢任何帮助!

Answer 1

经过很长时间我找到了解决方案。在我的 selectFeature 函数中，我应该更新缓存的缩放状态，而不是直接设置 transform 属性。此解决方案的优势在于，这将触发缩放事件，该事件将更新已设置的缩放功能中的 UI。

这里的工作示例:https://codepen.io/brunofenzl/pen/zWmoWJ

为了更新缓存的转换，我使用了 d3.zoomIdentity，如 readme 中所述

var t = d3.zoomIdentity.translate(x, y).scale(k);

所以在我的例子中修改后的代码是:

this.view.transition()
  .duration(750)
  .call(
    this.zoom.transform, 
    d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale)
  );

这种技术的缺点是范围限制不再像预期的那样工作，所以如果你的范围小于你的新缩放，例如，下次你拖动或缩放时，缩放将跳到下一个允许的可能缩放值你的程度。我解决了这个问题，现在禁用缩放范围。我希望这对其他人有帮助。