Angular项目中D3图表zoom重置功能点击触发无响应如何解决

问题原因 #

• reset()方法内重新创建了独立的d3.zoom()实例，和drawChart()中绑定到svg元素的缩放行为实例不关联，新实例的操作无法触发原有缩放配置的更新。
• 额外优化点：直接修改svg元素的transform属性容易和D3缩放行为的内部状态冲突，标准实现是将缩放行为绑定到svg容器，transform属性修改应用到svg内部的内容组。
• 潜在问题：reset()中let d3: any = D3的赋值如果和drawChart()中使用的d3不是同一实例，也会导致操作失效。

修复方案 #

方案1：复用同一个zoom实例（推荐） #

1. 在Angular组件类中声明zoom实例为成员变量，保证两个方法共用同一实例：

// 组件类成员变量声明
private zoom: any;

2. 修改drawChart()中的缩放绑定逻辑：

drawChart() {
  // 原有绘图逻辑省略
  // 初始化zoom实例存到成员变量
  this.zoom = d3.zoom().on("zoom", function () {
    // 建议将所有图表内容放到id为chart-content的g标签内，修改g的transform而非svg本身
    d3.select('#chart-content').attr("transform", d3.event.transform)
  })
  d3.select('#line-chart').call(this.zoom)
}

3. 调整reset()方法逻辑：

reset(){
  const svg = d3.select('#line-chart');
  // 复用成员变量的zoom实例
  svg.call(this.zoom.transform, d3.zoomIdentity.translate(0,0).scale(1))
}

方案2：无需存储zoom实例的兼容写法 #

如果不想改动原有结构存储zoom实例，可以直接通过元素已绑定的缩放行为触发重置：

reset(){
  const svg = d3.select('#line-chart');
  // 直接调用zoom.transform会自动读取元素上已绑定的缩放行为配置
  svg.call(d3.zoom().transform, d3.zoomIdentity)
}

内容的提问来源于stack exchange，提问作者Nikhil More