d3.js - D3 - 如何在手动缩放和平移到国家/地区路径后获得正确的比例和平移原点

Question

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

单击国家/地区，我正在缩放/平移到该国家/地区，使用以下命令:

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

但是，如果我继续拖动平移，则在单击发生之前，在平移之前， map 会猛地回到初始位置。平移/缩放代码在这里:

  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)

换句话说，通过单击放大一个点，然后通过重绘功能拖动后，重绘没有选择正确的平移+缩放继续。

Answer 1

为了在过渡后继续正确的“缩放”，我必须将缩放设置为新的平移和缩放。

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

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