如何在D3中缩短链接长度并分散排列以避免箭头碰撞？

我用D3实现了一个力导向图，但现在遇到了一个问题：当多个链接指向同一个节点时，箭头会重叠碰撞。我希望能让这些箭头均匀分布在目标节点的边缘，实现分散排列的效果。

之前我尝试在tick事件里手动调整链接的x2、y2坐标，虽然能移动箭头，但找不到一种标准化的方法，既能保证箭头不碰撞，又能始终贴近节点边缘。

原始代码 #

const link = svg.selectAll(".link")
  .data(this.actionData.links).enter().append("line") 
  .attr("class", "link") 
  .style("stroke", "black")
  .attr('marker-end', 'url(#arrow)')

const node = svg.selectAll(".node")
  .data(this.actionData.nodes).enter().append("rect")
  .attr("class", "node")
  .attr("width", 20)
  .attr("height", 30)
  .attr("rx", 10) 
  .attr("ry", 5) 
  .style("stroke", "black")
  .style("fill", "pink");

// 箭头定义
let markerBoxWidth = 20
let markerBoxHeight = 20
let refX = markerBoxWidth / 2
let refY = markerBoxHeight / 2
let arrowPoints = [[0, 0], [0, 20], [20, 10]];

svg
  .append('defs')
  .append('marker')
  .attr('id', 'arrow')
  .attr('viewBox', [0, 0, markerBoxWidth, markerBoxHeight])
  .attr('refX', refX)
  .attr('refY', refY)
  .attr('markerWidth', markerBoxWidth)
  .attr('markerHeight', markerBoxHeight)
  .attr('orient', 'auto-start-reverse')
  .append('path')
  .attr('d', d3.line()(arrowPoints))
  .attr('stroke', 'black');

let simulation = d3.forceSimulation(this.actionData.nodes)
  .force("center", d3.forceCenter(width/2, height/2))
  .force("link", d3.forceLink(this.actionData.links)
    .id(link => link.id)
    .distance(200))
  .force("charge", d3.forceManyBody().strength(-500))
 

simulation.on("tick", () => {
  node
    .attr("x", node => node.x)
    .attr("y", node => node.y)
  // 链接与节点的连接
  link
    // .attr("x1", link => link.source.x + 100) 我试过的方法，没用
    // .attr("y1", link => link.source.y + 20)
    // .attr("x2", link => link.target.x + 20)
    // .attr("y2", link => link.target.y - 20)
    .attr("x1", link => link.source.x) 
    .attr("y1", link => link.source.y)
    .attr("x2", link => link.target.x)
    .attr("y2", link => link.target.y)
})

解决思路 #

核心逻辑是统计每个节点的入站链接，根据链接的方向和在入站列表中的位置，给每个链接的终点计算垂直偏移量，让箭头均匀分布在目标节点边缘，避免重叠。

修改后的完整代码 #

// 预处理：给每个节点收集入站链接
this.actionData.nodes.forEach(node => {
  node.incomingLinks = [];
});
this.actionData.links.forEach(link => {
  const targetNode = this.actionData.nodes.find(n => n.id === link.target.id);
  targetNode.incomingLinks.push(link);
});

const link = svg.selectAll(".link")
  .data(this.actionData.links).enter().append("line") 
  .attr("class", "link") 
  .style("stroke", "black")
  .attr('marker-end', 'url(#arrow)')

const node = svg.selectAll(".node")
  .data(this.actionData.nodes).enter().append("rect")
  .attr("class", "node")
  .attr("width", 20)
  .attr("height", 30)
  .attr("rx", 10) 
  .attr("ry", 5) 
  .style("stroke", "black")
  .style("fill", "pink");

// 箭头定义：调整refX让箭头尖端指向节点边缘
let markerBoxWidth = 20
let markerBoxHeight = 20
let refX = 20 // 修改为箭头长度，确保尖端对准节点
let refY = markerBoxHeight / 2
let arrowPoints = [[0, 0], [0, 20], [20, 10]];

svg
  .append('defs')
  .append('marker')
  .attr('id', 'arrow')
  .attr('viewBox', [0, 0, markerBoxWidth, markerBoxHeight])
  .attr('refX', refX)
  .attr('refY', refY)
  .attr('markerWidth', markerBoxWidth)
  .attr('markerHeight', markerBoxHeight)
  .attr('orient', 'auto-start-reverse')
  .append('path')
  .attr('d', d3.line()(arrowPoints))
  .attr('stroke', 'black')
  .attr('fill', 'black');

const nodeWidth = 20;
const nodeHeight = 30;
const padding = 5; // 箭头与节点边缘的间距
const offsetStep = 8; // 入站链接的偏移步长

let simulation = d3.forceSimulation(this.actionData.nodes)
  .force("center", d3.forceCenter(width/2, height/2))
  .force("link", d3.forceLink(this.actionData.links)
    .id(link => link.id)
    .distance(200))
  .force("charge", d3.forceManyBody().strength(-500))
 

simulation.on("tick", () => {
  node
    .attr("x", node => node.x)
    .attr("y", node => node.y)
  
  link.each(function(d) {
    // 取节点中心坐标计算方向
    const sourceX = d.source.x + nodeWidth / 2;
    const sourceY = d.source.y + nodeHeight / 2;
    const targetX = d.target.x + nodeWidth / 2;
    const targetY = d.target.y + nodeHeight / 2;

    // 计算链接方向的单位向量
    const dx = targetX - sourceX;
    const dy = targetY - sourceY;
    const distance = Math.sqrt(dx * dx + dy * dy);
    const unitX = dx / distance;
    const unitY = dy / distance;

    // 计算节点边缘的基础位置（避开箭头长度和padding）
    const edgeX = targetX - (refX + padding) * unitX;
    const edgeY = targetY - (refX + padding) * unitY;

    // 获取当前链接在入站列表中的索引，计算偏移量
    const linkIndex = d.target.incomingLinks.indexOf(d);
    const totalIncoming = d.target.incomingLinks.length;
    const perpX = -unitY; // 垂直于链接方向的x分量
    const perpY = unitX; // 垂直于链接方向的y分量
    // 让链接均匀分布在节点两侧
    const offset = (linkIndex - (totalIncoming - 1) / 2) * offsetStep;

    // 最终的链接终点坐标
    const finalX = edgeX + offset * perpX;
    const finalY = edgeY + offset * perpY;

    // 设置链接起点和终点
    d3.select(this)
      .attr("x1", sourceX)
      .attr("y1", sourceY)
      .attr("x2", finalX)
      .attr("y2", finalY);
  });
})

关键说明 #

1. 入站链接预处理：给每个节点添加incomingLinks数组，收集所有指向它的链接，用于计算偏移索引。
2. 方向向量计算：通过节点中心坐标算出链接的方向单位向量，精准定位节点边缘的基础位置。
3. 垂直偏移：根据链接在入站列表中的位置，计算垂直于链接方向的偏移量，让多个链接均匀分布在节点两侧。
4. 箭头标记调整：将refX设为箭头长度，确保箭头尖端正好指向节点边缘，而非中心。

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