D3可缩放冰柱图转为垂直上下布局后点击缩放功能异常如何修复

问题原因 #

你修改的点击函数存在两个核心错误：

• 目标坐标的x0/x1、y0/y1赋值顺序倒置，计算出的坐标完全偏离画布范围
• 轴缩放映射逻辑错误，垂直布局下需要将聚焦节点的水平范围映射到画布全宽、垂直范围映射到画布全高，而非你写的反逻辑

修复后的clicked函数代码 #

function clicked(p) { 
  focus = focus === p ? p.parent : p;

  root.each(d => d.target = {
    // 水平方向：将聚焦节点的x范围映射到整个画布宽度
    x0: (d.x0 - p.x0) / (p.x1 - p.x0) * width,
    x1: (d.x1 - p.x0) / (p.x1 - p.x0) * width,
    // 垂直方向：将聚焦节点的y范围映射到整个画布高度
    y0: (d.y0 - p.y0) / (p.y1 - p.y0) * height,
    y1: (d.y1 - p.y0) / (p.y1 - p.y0) * height
  });

  const t = cell.transition().duration(750)
       .attr("transform", d => "translate(" + d.target.x0 + "," + d.target.y0 + ")");
  rect.transition(t)
      .attr("width", d => d.target.x1 - d.target.x0 - 1)
      .attr("height", d => rectHeight(d.target));
  text.transition(t).attr("fill-opacity", d => +labelVisible(d.target));
  tspan.transition(t).attr("fill-opacity", d => labelVisible(d.target) * 0.7);
}

额外注意点 #

如果修改后出现文字显示异常，同步调整labelVisible函数的判断逻辑即可：如果你保留了横排文字，判断条件还是用d.target.x1 - d.target.x0的宽度阈值；如果改成了竖排文字，就换成判断d.target.y1 - d.target.y0的高度阈值。

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