D3中是否存在线性比例尺与band比例尺结合的优雅方案？需拆分类别列

不用结合linear scale，嵌套使用band scale是更贴合D3设计理念的方案，完全规避手动计算位置的麻烦：

• 外层用d3.scaleBand()处理主类别（比如包含Team Skills的大分类），设置好padding等参数保证主列等宽。
• 对需要拆分子列的主类别，单独创建内层d3.scaleBand()，将内层scale的domain设为子列类别（比如Team Skills下的"沟通能力""技术能力""协作能力"），再把内层的range设为[0, 外层scale的bandwidth()]，子列会自动填满主列宽度，无需手动计算偏移。

示例代码：

// 外层主类别scale
const xMain = d3.scaleBand()
  .domain(["个人技能", "Team Skills", "项目经验"])
  .range([margin.left, width - margin.right])
  .padding(0.2);

// Team Skills对应的内层子列scale
const xSub = d3.scaleBand()
  .domain(["沟通能力", "技术能力", "协作能力"])
  .range([0, xMain.bandwidth()])
  .padding(0.1);

// 绘制子列时的坐标计算
svg.selectAll(".sub-bar")
  .data(subData)
  .enter()
  .append("rect")
  .attr("x", d => xMain("Team Skills") + xSub(d.category))
  .attr("width", xSub.bandwidth())
  // y、height等其他属性按需设置

这种方式的优势：

• 基于D3原生scale机制自动处理间距和宽度分配，避免手动计算的误差
• 子列数量变化时，仅需更新内层scale的domain，无需修改位置逻辑
• 代码可读性和可维护性更强，符合D3声明式编程风格

如果所有主类别都需要拆分子列，可将内层scale的创建逻辑封装成函数，根据每个主类别的子列数据动态生成对应scale。

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