如何为D3折线图添加显示数值的标签？

我想给D3折线图添加显示数值的标签，但不知道怎么实现。下面是我的现有代码：

var svg = d3.select('svg') 
  .attr("width", width) 
  .attr("height", height); 
var g = svg.append("g") 
  .attr("transform", "translate(" + 0 + "," + 0 + ")"); 
var x = d3.scaleTime() 
  .rangeRound([0, width]); 
var y = d3.scaleLinear() 
  .rangeRound([height, 0]); 
var line = d3.line() 
  .x(function(d) { return x(d.date)}) 
  .y(function(d) { return y(d.value)}) 
x.domain(d3.extent(data, function(d) { return d.date })); 
y.domain(d3.extent(data, function(d) { return d.value }));

我只需要给这张简单的单图表添加类似示例图的标签效果（每个数据点旁显示对应的数值）。

别担心，这个需求实现起来超简单，核心就是在绘制完折线之后，针对每个数据点添加文本元素来展示数值。

具体实现步骤： #

1. 先确认折线已绘制（如果你的代码里还没加，补上这行）：

g.append("path")
  .datum(data)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-width", 2)
  .attr("d", line);

2. 添加数值标签：
   我们直接在g容器上绑定数据，为每个数据点创建文本标签，通过比例尺定位到对应位置，再微调偏移让显示更美观：

g.selectAll(".value-label")
  .data(data)
  .enter()
  .append("text")
  .attr("class", "value-label")
  // 定位到数据点位置，向上偏移10px避免和折线重叠
  .attr("x", function(d) { return x(d.date); })
  .attr("y", function(d) { return y(d.value) - 10; })
  // 让标签居中对齐在数据点上方
  .attr("text-anchor", "middle")
  .attr("font-size", "12px")
  .attr("fill", "#333")
  // 显示格式化后的数值，可根据需求调整（比如保留两位小数）
  .text(function(d) { return d.value.toFixed(2); });

实用小技巧： #

• 如果标签和折线/点重叠，调整y的偏移量就行，比如改成y(d.value) + 15把标签移到数据点下方
• 可以修改字体大小、颜色等样式，让标签和你的图表风格匹配
• 要是数据量太大标签挤在一起，要么只显示关键节点的标签，要么加个鼠标hover显示标签的交互逻辑

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