D3.js编程缩放SVG后拖拽状态未更新问题求助

使用D3.js 7.8.5版本构建树形图并添加缩放功能，初始状态下拖拽、缩放均正常，但通过代码调用this.svg.transition().duration(750).call(this.svg_zoom.scaleTo,0.6)完成编程缩放后，拖拽操作的坐标未同步更新，拖拽时视图会跳回之前的位置与缩放状态。尝试过直接平移SVG、参考D3教程、修改viewBox等方法，问题仍未解决。

相关代码 #

初始缩放配置代码

d3.select('.hierarchy-container').append('svg')
this.svg_zoom=d3.zoom()
 .scaleExtent([0.5,2])
 .on("zoom", (event)  =>{
     d3.select("#svg_group").attr("transform",event.transform)
   })
this.svg=d3.select("svg")
 .attr('width','100%')
 .attr('height', '100%')
 .attr("viewBox", [-this.svg_container_dimension.width/2+120,-200, this.svg_container_dimension.width, this.svg_container_dimension.height])
 .style("user-select", "none")
 .call(this.svg_zoom)
 .append('g').attr('id',"svg_group")  

编程缩放代码

this.svg.transition().duration(750).call(this.svg_zoom.scaleTo,0.6)

问题表现 #

编程缩放完成后，执行拖拽操作时，视图会突然跳回缩放前的位置与缩放比例，无法保持当前缩放状态下的拖拽轨迹。

解决方案 #

问题根源在于zoom行为绑定的元素与编程缩放调用的元素不匹配：

1. 调整初始代码，分开保存SVG元素和内部g元素的引用，避免混淆：

// 先创建SVG元素并保存引用
const svgElement = d3.select('.hierarchy-container').append('svg')
  .attr('width','100%')
  .attr('height', '100%')
  .attr("viewBox", [-this.svg_container_dimension.width/2+120,-200, this.svg_container_dimension.width, this.svg_container_dimension.height])
  .style("user-select", "none")

// 配置zoom行为
this.svg_zoom = d3.zoom()
  .scaleExtent([0.5,2])
  .on("zoom", (event) => {
      d3.select("#svg_group").attr("transform", event.transform)
    })

// 将zoom绑定到SVG元素，再添加内部g元素并保存引用
this.svg = svgElement.call(this.svg_zoom).append('g').attr('id',"svg_group")
// 保存SVG元素引用用于后续编程缩放
this.svgElement = svgElement

2. 修改编程缩放代码，对绑定了zoom行为的SVG元素调用缩放方法：

this.svgElement.transition().duration(750).call(this.svg_zoom.scaleTo, 0.6)

原理说明 #

D3的zoom行为状态是存储在绑定该行为的元素上的（此处为SVG元素）。原代码中this.svg指向的是内部g元素，对g元素调用zoom缩放只会临时改变视图，不会更新SVG元素上的zoom状态，后续拖拽时zoom行为读取旧状态，导致视图跳转。确保对绑定了zoom行为的SVG元素执行编程缩放，才能同步更新zoom状态，解决拖拽异常问题。

内容的提问来源于stack exchange，提问作者Himanshu Bohra