如何为D3.js雷达图添加嵌套轴标签，合并公共前缀避免重复显示

实现思路 #

• 第一步：标签分组预处理
  先把所有轴标签按公共前缀分组，你当前的场景下可以把所有Management.sr_lvl_*的标签归为同一组，提取公共前缀Management作为父标签，子标签仅保留sr_lvl_1/sr_lvl_2等后缀部分
• 第二步：渲染底层子标签
  按照原有雷达图轴标签的渲染逻辑，把处理后的子标签放在对应轴的常规标签位置，无需修改角度和基础坐标
• 第三步：计算父标签放置坐标
  取同一分组所有子标签对应的轴角度的平均值作为父标签的放置角度，把父标签放在比子标签向外偏移20-30px的位置，可根据实际布局调整偏移量
• 第四步（可选）：添加分组区分样式
  可以在父标签和子标签之间加短分隔线、或者给父标签加粗显示，和子标签做视觉区分

核心代码片段 #

// 1. 标签预处理示例
const rawAxes = ["Management.sr_lvl_1", "Management.sr_lvl_2", "Management.sr_lvl_3", "Technical.sr_lvl_1", "Technical.sr_lvl_2"]
const axisGroups = d3.groups(rawAxes, d => d.split(".")[0])
  .map(([parentLabel, children]) => ({
    parentLabel,
    children: children.map(d => ({
      label: d.split(".")[1],
      // 保留原有轴的角度信息
      angle: yourOriginalAxisAngleCal(d)
    }))
  }))

// 2. 渲染父标签
axisGroups.forEach(group => {
  // 计算分组平均角度
  const avgAngle = d3.mean(group.children, d => d.angle)
  const radius = yourMaxRadius + 40 // 比子标签更靠外
  const x = radius * Math.cos(avgAngle - Math.PI / 2)
  const y = radius * Math.sin(avgAngle - Math.PI / 2)
  svg.append("text")
    .attr("x", x)
    .attr("y", y)
    .attr("text-anchor", "middle")
    .style("font-weight", "bold")
    .text(group.parentLabel)
})

注意把代码中的yourOriginalAxisAngleCal、yourMaxRadius替换为你现有雷达图代码中的对应角度计算方法、雷达图最大半径参数

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