基于D3的图表安卓端双指缩放卡顿，桌面及iOS端运行流畅如何解决

核心原因 #

安卓Chrome内核的默认触摸缩放行为会与D3缩放事件抢占资源，同时动态修改SVG元素样式会触发高频重绘，安卓端SVG渲染优化能力弱于Safari，进而产生卡顿。

修复步骤 #

1. 禁用浏览器默认触摸行为
   首先在页面头部添加正确的viewport配置，禁止页面默认缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

给SVG元素添加touch-action属性，禁止浏览器默认拦截触摸事件：

const svg = d3
  .create("svg")
  .attr("width", width)
  .attr("height", height)
  .attr("viewBox", [-width / 2, -height / 2, width, height])
  // 新增touch-action配置，禁用默认触摸行为
  .attr("style", "max-width: 100%; height: auto; height: intrinsic; touch-action: none;");

2. 优化描边宽度逻辑，减少重绘
   替换动态计算修改stroke-width的逻辑，使用SVG原生的non-scaling-stroke属性实现固定描边宽度，无需在缩放事件中重复计算修改：

const g = svg.append("g")
  // 新增属性，描边宽度不随缩放变化
  .attr("vector-effect", "non-scaling-stroke")
  // 新增GPU加速提示
  .style("will-change", "transform")
  // 直接固定设置描边宽度
  .style("stroke-width", 3);

3. 简化缩放事件逻辑
   移除缩放事件中修改样式的操作，仅保留transform更新，同时可添加缩放范围限制避免极端缩放带来的渲染压力：

let zoom_handler = d3.zoom()
  // 按需设置缩放的最小/最大值，避免过度缩放
  .scaleExtent([0.5, 4])
  .on("zoom", (e) => {
    g.attr("transform", e.transform);
  });
svg.call(zoom_handler);

特殊场景兼容 #

如果业务要求必须实现描边宽度随缩放比例动态变化，无法使用non-scaling-stroke，可将修改逻辑放入requestAnimationFrame中异步执行，避免阻塞主线程：

let zoom_handler = d3.zoom()
  .scaleExtent([0.5, 4])
  .on("zoom", (e) => {
    requestAnimationFrame(() => {
      g.attr("transform", e.transform)
       .attr("stroke-width", 3 / Math.sqrt(e.transform.k));
    })
  });

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