D3 - 如何获得正确的缩放和手动缩放和平移到国家路径后翻译原点 [英] D3 - How to get correct scale and translate origin after manual zoom and pan to country path

问题描述

我有一个具有平移和缩放功能的拓扑图。

I've got a topology map with pan and zoom functionality.

点击国家/地区，我将缩放/平移到国家/地区， / p>

Clicking on the country, I'm zoom/panning into the country, using this:

  if (this.active === d) return

  var g = this.vis.select('g')
  g.selectAll(".active").classed("active", false)
  d3.select(path).classed('active', active = d)

  var b = this.path.bounds(d);
  g.transition().duration(750).attr("transform","translate(" +
    this.proj.translate() + ")" +
    "scale(" + .95 / Math.max((b[1][0] - b[0][0]) / this.options.width, (b[1][1] - b[0][1]) / this.options.height) + ")" +
    "translate(" + -(b[1][0] + b[0][0]) / 2 + "," + -(b[1][1] + b[0][1]) / 2 + ")");

  g.selectAll('path')
    .style("stroke-width", 1 / this.zoom.scale())

但是，如果我继续拖动平移，地图会在点击发生前平移回到初始位置。用于平移/缩放的代码如下：

However, if I continue to drag pan, the map jerks back into the initial position before the click happens, before panning. Code to pan/zoom is here:

  this.zoom = d3.behavior.zoom().on('zoom', redraw)
  function redraw() {

    console.log('redraw')

    _this.vis.select('g').attr("transform","translate(" +
      d3.event.translate.join(",") + ")scale(" + d3.event.scale + ")")

    _this.vis.select('g').selectAll('path')
      .style("stroke-width", 1 / _this.zoom.scale())
  }
  this.vis.call(this.zoom)

换句话说，在点击放大点后，

In another words, after zooming into a point by clicking, and then dragging by the redraw function, the redraw does not pick up the correct translate+scale to continue from.

推荐答案

要继续执行，请使用重画功能拖曳，

To continue at the right 'zoom' after the transition, I had to set the zoom to the new translate and scale.

重置示例与我的点击和缩放事件类似，设置的新缩放点是关键位：

Example of reset which is applied similarly to my click and zoom event, the set new zoom point is the critical bit:

_this.vis.select('g').transition().duration(1000)
   .attr('transform', "translate(0,0)scale(1)")

/* SET NEW ZOOM POINT */
_this.zoom.scale(1);
_this.zoom.translate([0, 0]);

这篇关于D3 - 如何获得正确的缩放和手动缩放和平移到国家路径后翻译原点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！