如何在D3.js中将标签移至矩形上方？附新手进度条代码

嘿，刚上手D3.js就能做进度条已经超棒了！要把标签挪到矩形上方其实很简单，我结合你的代码给你调整一下，你可以直接参考：

var data = [2000, 200]; // 数据值；v1=总量，v2=当前值
var barHeight = 30; // 每个条形的高度，单独提出来更易维护
var chart = d3.select("#container")
  .append("svg") // 在容器内创建svg对象
  .attr("class", "chart")
  .attr("width", 400) // 条形图固定宽度
  .attr("height", barHeight * data.length + 20); // 多留一点顶部空间放标签

var x = d3.scale.linear() // 根据数据和固定宽度生成百分比
  .domain([0, d3.max(data)])
  .range([0, 400]);

// 先为每个数据创建分组，方便统一管理矩形和标签
var groups = chart.selectAll("g")
  .data(data)
  .enter()
  .append("g")
  .attr("transform", function(d, i) {
    // 每个分组的垂直位置，i是索引，这里给标签留了20px的顶部空间
    return "translate(0," + (i * barHeight + 20) + ")";
  });

// 添加矩形（进度条）
groups.append("rect")
  .attr("width", x)
  .attr("height", barHeight - 5) // 留点间距
  .attr("fill", "#42a5f5");

// 添加标签，放在矩形上方
groups.append("text")
  .attr("x", 0) // 标签和矩形左对齐
  .attr("y", -10) // y值设为负数，就会跑到矩形上方啦
  .attr("fill", "#333")
  .attr("font-size", "14px")
  .text(function(d, i) {
    // 根据索引显示对应的标签，比如"总量"和"当前值"
    return i === 0 ? "总量: " + d : "当前值: " + d;
  });

关键修改点： #

• 用<g>分组管理元素：把每个条形的矩形和标签放在同一个分组里，通过transform统一控制垂直位置，这样调整起来更省心。
• 调整标签的y坐标：原来的标签如果是和矩形底部对齐，现在把y设为负数（比如-10），就能让标签跑到矩形的上方，数值可以根据你想要的间距调整。
• 预留顶部空间：在设置SVG高度的时候多加了20px，避免标签被SVG容器裁剪掉。

如果你的原有代码里已经有标签了，只需要找到标签的attr("y", ...)部分，把数值改成负数，同时确保SVG高度足够容纳顶部的标签就行～

内容的提问来源于stack exchange，提问作者Ant's