D3.js调用axisLeft生成y轴时刻度重复、标签重叠如何解决

运行D3.js代码渲染Y轴时，出现内外双重刻度、刻度值重复打印、标签重叠的问题，效果如下：

出现该问题的核心原因是代码中连续两次调用axisLeft()渲染了完整Y轴：

• 第一次直接在gRef.current选中的容器上调用axisLeft，渲染了带长内侧刻度（网格线）的第一套Y轴
• 之后又在该容器内追加了新的<g>元素，再次调用axisLeft渲染了第二套Y轴
  两套坐标轴位置接近，刻度标签完全重叠，就会出现重复显示的效果。

另外原代码中给刻度<text>元素设置margin-left是无效的，SVG文本元素不支持CSS盒模型的margin属性，调整位置需要修改x/y属性。

移除重复的坐标轴渲染逻辑，将类名挂载、坐标轴配置、文本样式设置整合到同一次渲染流程中即可：

const strAxis = () => {
  if (!gRef.current) return;
  
  select(gRef.current)
    .attr("class", "yAxis")
    .call(
      axisLeft(props.scale)
        .tickSize(tickSize)
        .tickSizeInner(wd) // 保留长内侧刻度作为网格线
        // 可按需配置外侧刻度长度，不需要可以设为0
        // .tickSizeOuter(0)
    )
    .call((g) => {
      g.selectAll(".tick text")
        .style("stroke", props.textColor)
        .style("font-size", props.tickFontSize || "12px")
        .attr("x", -10); // 替代无效的margin-left，按需调整偏移数值
    })
};

如果需要将网格线和坐标轴刻度分层管理（方便单独调整样式、层级顺序），不要重复渲染完整坐标轴，可以单独为网格线创建独立容器，仅渲染刻度线、隐藏刻度文本即可，示例逻辑：

const strAxis = () => {
  if (!gRef.current) return;
  const root = select(gRef.current);

  // 单独渲染网格线层
  root.append("g")
    .attr("class", "y-grid")
    .call(
      axisLeft(props.scale)
        .tickSize(wd)
        .tickFormat(() => "") // 隐藏网格线层的刻度文本，避免重复
    );

  // 单独渲染坐标轴刻度层
  root.append("g")
    .attr("class", "yAxis")
    .call(axisLeft(props.scale).tickSize(tickSize))
    .call((g) => {
      g.selectAll(".tick text")
        .style("stroke", props.textColor)
        .style("font-size", props.tickFontSize || "12px")
    })
};

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