如何在力导向图的连线中间添加源节点指向目标节点的箭头？

我来帮你搞定这个连线中间加箭头的问题！结合你的需求和参考的思路，我整理了具体的实现步骤，你可以直接套用到你的项目里：

1. 先定义箭头的Marker #

首先在SVG里添加箭头的图形定义，这是D3里绘制箭头的基础：

// 给SVG添加defs容器，用来存储箭头的图形定义
var defs = svg.append("defs");

// 定义指向目标节点的箭头样式
defs.append("marker")
    .attr("id", "arrow")
    .attr("viewBox", "0 -5 10 10") // 箭头的可视范围
    .attr("refX", 0) // 箭头的参考点，设为0方便放在连线中间
    .attr("refY", 0)
    .attr("markerWidth", 6) // 箭头的宽度
    .attr("markerHeight", 6) // 箭头的高度
    .attr("orient", "auto") // 自动根据连线方向旋转箭头
    .append("path")
    .attr("d", "M0,-5L10,0L0,5") // 箭头的三角形路径
    .style("fill", "#333"); // 箭头颜色

2. 创建箭头元素并绑定连线数据 #

和绘制连线一样，我们需要创建箭头元素并绑定到你的连线数据上：

var arrow = svg.selectAll(".arrow")
    .data(links) // links是你的连线数据数组
    .enter()
    .append("path")
    .attr("class", "arrow")
    .attr("marker-end", "url(#arrow)") // 给线段末端加上箭头
    .style("stroke", "#333")
    .style("stroke-width", 1);

3. 在Tick事件中动态更新箭头位置 #

力导向图的节点位置是实时变化的，所以必须在每次tick时重新计算箭头的位置和方向：

function tick() {
  // 先更新你原来的连线位置（保留自己的原有代码）
  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; });

  // 重点：更新箭头的位置和方向
  arrow.attr("d", function(d) {
    // 计算连线的x、y方向差值
    var dx = d.target.x - d.source.x;
    var dy = d.target.y - d.source.y;
    
    // 计算连线中间区域的两个点：一个起点，一个终点（箭头指向终点）
    var midStartX = d.source.x + dx * 0.4; // 从源节点出发，走到40%的位置
    var midStartY = d.source.y + dy * 0.4;
    var midEndX = d.source.x + dx * 0.5; // 走到50%的位置（连线中点）
    var midEndY = d.source.y + dy * 0.5;

    // 返回箭头线段的路径
    return `M${midStartX},${midStartY} L${midEndX},${midEndY}`;
  });

  // 更新节点位置（保留自己的原有代码）
  node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
}

4. 实现反向箭头（比如Node2到Node3的情况） #

如果需要某些连线显示反向箭头（指向源节点），可以在你的连线数据里加一个标记，比如reverse: true，然后修改箭头的计算逻辑：

arrow.attr("d", function(d) {
  var dx = d.target.x - d.source.x;
  var dy = d.target.y - d.source.y;
  var midStartX, midStartY, midEndX, midEndY;

  if (d.reverse) {
    // 反向箭头：从目标节点往回走到40%和50%的位置
    midStartX = d.target.x + (-dx) * 0.4;
    midStartY = d.target.y + (-dy) * 0.4;
    midEndX = d.target.x + (-dx) * 0.5;
    midEndY = d.target.y + (-dy) * 0.5;
  } else {
    // 正向箭头：从源节点走到40%和50%的位置
    midStartX = d.source.x + dx * 0.4;
    midStartY = d.source.y + dy * 0.4;
    midEndX = d.source.x + dx * 0.5;
    midEndY = d.source.y + dy * 0.5;
  }

  return `M${midStartX},${midStartY} L${midEndX},${midEndY}`;
});

这样就能实现你要的Node1----->------Node2--------<-------Node3效果啦！之前你可能没成功的原因大概率是没在tick事件里动态更新箭头位置，毕竟力导向图的节点一直在动，箭头必须跟着实时调整。

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