d3.js v4 通过鼠标滚轮和编程方式缩放答案

【问题标题】：d3.js v4 zoom via mouse wheel and programmaticallyd3.js v4 通过鼠标滚轮和编程方式缩放
【发布时间】：2021-05-25 18:39:51
【问题描述】：

我有一张带有一些可点击区域的地图。当点击某个位置时，我的 zoomto 功能就会参与进来，地图会缩放到相应的位置。

但是 d3js 使用的参考（内部？）不同步，结果是鼠标滚轮事件 on("zoom", zoomed) 从一个完全不同的角度开始。

例子：

https://jsfiddle.net/5rzp6bxt/

var svg = d3.select("#svg");

var zoom=d3.zoom()
  .extent([[0, 0], [1200, 660]])
  .scaleExtent([1, 3])
  .on("zoom", zoomed);
svg.call(zoom);
    
g = svg.append("g");

 g.append("circle")
   .attr("cx", document.body.clientWidth / 2)
   .attr("cy", document.body.clientHeight / 2)
   .attr("r", 20)
   .style("fill", "#B8DEE6").on("click", zoomto);
   
function zoomed(cords) {
    g.attr("transform", d3.event.transform);                
}


function zoomto(){
  
  g.transition()
           .duration(450).attr("transform", "translate(1.5, 1.5) scale(1.2)");
}

【问题讨论】：

缩放行为不使用元素的“变换”属性来确定当前缩放状态是什么，它仅在触发缩放事件时更新缩放状态。见here。

标签： javascript d3.js

【解决方案1】：

感谢 Andrew Reid 的提示，我能够解决我的问题。这是我最后的 goto 函数

function zoomto(x,y,k){
   var transform = d3.zoomIdentity
                  .translate(x,y)
                  .scale(k);

   svg.transition().duration(450).call(zoom.transform, transform);

}

【讨论】：