如何在D3.js桑基图的链接末端上方添加并正确定位文本？

我正在给D3.js力导向图的链接上方添加文本，希望把文本放在链接末端、目标节点的前方。目前已经实现了X轴定位，但Y轴定位始终有问题，调整数值后还是无法正确显示。

当前添加链接文本的代码：

// Add the link text
var linkText = svg.append("g").selectAll(".link")
                .data(graph.links)
                .enter()
                .append("text").attr('class','linkText')
                .attr("x", function(d) {return d.target.x - 110; })
                .attr("y", function(d) { return d.source.y + (d.target.y - d.source.y) / 2; })
                .attr("dy", ".35em")
                .attr("text-anchor", "end")
                .attr("transform", null)
                .text(function(d) { return "Total : " + d.value + " $"; })
                .attr("text-anchor", "start")

当前效果：

期望效果：

解决方法 #

核心问题分析 #

力导向图的节点位置是动态计算更新的，你初始化时设置的y坐标仅在加载初期生效，后续力布局运行时文本不会同步跟随节点移动；另外Y轴的偏移逻辑需要调整，让文本显示在链接上方而非中间对齐。

1. 修正Y轴定位与文本偏移 #

把dy值调整为-1em，让文本向上偏移到链接上方；同时保持Y轴取源节点与目标节点的中点，确保文本对齐链接路径。

2. 添加动态位置更新逻辑 #

在力布局的tick函数中同步更新文本的x、y坐标，确保节点移动时文本跟着联动。

调整后的完整代码片段 #

// 初始化链接文本
var linkText = svg.append("g").selectAll(".linkText")
  .data(graph.links)
  .enter()
  .append("text")
  .attr('class','linkText')
  .attr("text-anchor", "start") // 统一文本对齐方式
  .text(function(d) { return "Total : " + d.value + " $"; })
  .attr("dy", "-1em"); // 让文本显示在链接上方

// 在tick函数中同步更新所有元素位置
function ticked() {
  // 更新链接路径
  link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

  // 更新节点位置
  node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

  // 更新链接文本位置
  linkText
    .attr("x", function(d) { return d.target.x - 110; }) // 保持目标节点前方的X偏移
    .attr("y", function(d) { return (d.source.y + d.target.y) / 2; }); // 对齐链接中点
}

额外优化点 #

• 移除代码中重复设置的text-anchor属性，避免样式冲突；
• 初始化文本时选择器改为.linkText，和元素的class对应，逻辑更清晰。

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