使用d3.js v4实现可缩放树形图失败问题排查

云原生阿岚

2026-7-27

问题解决方法

你的缩放功能失效核心有两个问题：

1. 节点容器层级错误

你创建了用于承载缩放变换的<g>元素，但后续的节点却直接挂载在<svg>下，没有放进这个容器里。缩放变换需要作用在所有节点的父容器上，才能统一控制所有节点的缩放和平移。

2. 缩放事件处理逻辑错误

你的zoomed函数里没有使用d3.event.transform的变换数据，反而重新设置了节点的初始位置，导致缩放效果无法体现。

修改后的完整代码：

// create tree
let chart = function() {
  const root = treemap(filteredData);
  const svg = d3.select("svg");
  // 这个g是承载所有节点的缩放容器
  const zoomGroup = svg.append('g').attr('class', 'zoom-container');

  svg
    .attr("viewBox", [0, 0, width, height])
    .attr("width", width)
    .attr("height", height)
    .classed("svg-content-responsive", true);

  // 绑定数据到zoomGroup下的g，而不是svg下的所有g
  const leaf = zoomGroup
    .selectAll("g")
    .data(root.descendants())
    .enter()
    .append("g")
    .attr("class", function(d) {return "node-" + d.depth})
    .attr('transform', function(d) { return 'translate(' + [d.x0, d.y0] + ')' });

 /* 这里保留你原来的叶子节点鼠标事件代码 */

  let zoom = d3.zoom()
      .scaleExtent([1, 8])
      .on('zoom', zoomed);

  // 缩放事件处理：直接将变换应用到容器g上
  function zoomed() {
    zoomGroup.attr('transform', d3.event.transform);
    console.log("zoomed");
    console.log(d3.event.transform);
  }

  svg.call(zoom);

  return svg.node();
};