如何在D3.js折线图的数据点上正确定位并添加文本？

你的问题出在直接使用line.x和line.y获取坐标——这两个属性返回的是你定义折线时的x/y访问器函数，而非具体数据点的计算后坐标，同时你也没有将文本元素与目标数据点绑定，导致无法正确计算位置。

方法1：给单个指定数据点添加文本 #

从data数组中选中目标数据点，用xScale和yScale直接计算该点的SVG坐标：

// 选中要标注的目标数据点（示例选第3个点，索引为2）
const targetPoint = data[2];

svg.append("text")
  .attr("x", xScale(targetPoint.date)) // 用xScale计算该点的x坐标
  .attr("y", yScale(targetPoint.value)) // 用yScale计算该点的y坐标
  .attr('text-anchor', 'middle')
  .attr("dy", "-10px") // 向上偏移10px，避免与折线重叠
  .attr("class", "myLabel")
  .text("I'm a label");

方法2：给所有数据点添加文本 #

如果需要给每个数据点都标注文本，使用D3的数据绑定机制批量创建：

svg.selectAll(".point-label")
  .data(data)
  .enter()
  .append("text")
  .attr("x", d => xScale(d.date))
  .attr("y", d => yScale(d.value))
  .attr('text-anchor', 'middle')
  .attr("dy", "-10px")
  .attr("class", "myLabel")
  .text(d => `值：${d.value}`); // 可自定义文本内容，比如显示数据值

补充说明 #

• 折线生成器line的.x()和.y()方法是用来定义如何从数据中提取坐标值的函数，必须传入具体的d（数据对象）才能得到对应的SVG坐标，不能直接作为属性值使用。
• 使用dy属性可以调整文本相对于数据点的垂直位置，避免文本与折线或数据点重叠。

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