如何在D3垂直堆叠柱状图与折线组合图的每个柱顶添加数值文本

现存问题 #

你的代码存在几个核心问题导致顶部文本不生效：

• 遍历datas的循环内重复执行了柱子、文本、折线的渲染逻辑，导致元素重复绑定，逻辑混乱
• 文本x坐标计算错误：x(d.name)中d.name是指标签名（如「Total Headcount」），而x轴比例尺的定义域是分组名称（如「数字流程工业」），无法正确映射坐标
• 没有针对每个分组下的子柱做位置偏移，文本无法对齐到对应柱子顶部
• 文本y坐标没有做向上偏移，会和柱子顶部重叠，可读性差
• subgroups定义的中文键名和模拟数据的英文键名不匹配，无法读取到正确的数值

注意：首先需要把你定义的subgroups从["总人数","已入职资源数"]改为["Total Headcount", "Onboarded resource count"]，和数据字段对齐。

修正代码 #

把原来的datas.forEach(data => { ... })整个块替换为以下代码：

// 渲染分组柱子
g.selectAll("g.bars")
  .data(datas)
  .enter()
  .append("g")
  .attr("class","bars")
  .attr("transform", function (d) { return "translate(" + x(d.group) + ",0)"; })
  .selectAll("rect")
  .data(function (d) { 
    return subgroups.map(function (key) { 
      return { 
        group: d.group,
        key: key,
        value: d[key] 
      }; 
    })
  })
  .enter().append("rect")
  .attr("x", function (d) { return xSubgroup(d.key); })
  .attr("y", function (d) { return y(d.value); })
  .attr("width", xSubgroup.bandwidth())
  .attr("height", function (d) { return height - y(d.value); })
  .attr("fill", function (d) { return color(d.key); })
  .append("svg:title")
  .text(function (d) {
    return `${d['key']}:` + d.value;
  })

// 渲染柱子顶部文本
g.selectAll("g.bars")
  .selectAll("text.barstext")
  .data(function (d) { 
    return subgroups.map(function (key) { 
      return { 
        group: d.group,
        key: key,
        value: d[key] 
      }; 
    })
  })
  .enter()
  .append("text")
  .attr("class", "barstext")
  .attr("font-size", "11px")
  .attr("text-anchor", "middle")
  .attr("fill", "#333")
  // x坐标 = 分组起始位置 + 子柱子x偏移 + 子柱子宽度的一半，实现水平居中
  .attr("x", function (d) { 
    return x(d.group) + xSubgroup(d.key) + xSubgroup.bandwidth() / 2; 
  })
  // y坐标 = 柱子顶部y值 - 5px，避免和柱子重叠
  .attr("y", function (d) { return y(d.value) - 5; })
  .text(function (d) { return d.value; })

// 折线图逻辑放外面，不要放在循环里，避免重复生成多条折线
var averageline = d3.line()
  .x(function (d, i) { return x(d['group']) + x.bandwidth() / 2; })
  .y(function (d) { return y1(d['percentage']); })
  .curve(d3.curveMonotoneX);
var path = g.append("path")
  .attr("class", "line")
  .style("fill", "none")
  .style("stroke", "#58D68D")
  .style("stroke-width", 2)
  .attr("d", averageline(datas));
g.selectAll("myCircles")
  .data(datas)
  .enter()
  .append("circle")
  .attr("class", "dot")
  .style("fill", "white")
  .style("stroke", "#58D68D")
  .style("stroke-width", 2)
  .style('cursor', 'pointer')
  .attr("cx", function (d, i) { return x(d['group']) + x.bandwidth() / 2; })
  .attr("cy", function (d) { return y1(d['percentage']); })
  .attr("r", 3)
  .append("svg:title")
  .text(function (d) {
    return "占比：" + d.percentage;
  })

核心调整点 #

• 移除了外层冗余的datas.forEach循环，所有渲染逻辑直接通过D3的数据绑定机制完成，避免重复渲染
• 文本的x坐标基于分组位置、子柱子偏移和子柱子宽度计算，保证对齐到对应柱子的正上方
• 文本y坐标向上偏移5px，避免和柱子顶部重叠，同时设置text-anchor: middle实现水平居中
• 折线图逻辑移到循环外，避免生成多条重复的折线和数据点

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