当然可以！完全不用折腾d3-force的核心代码，只需要在链接的视觉绘制阶段做些小调整，就能让力导向图的链接呈现出树状图里常见的带水平/垂直端点的贝塞尔曲线样式。

核心思路 #

力导向图的布局逻辑（节点位置计算）完全不用改动，我们只需要针对每条链接，根据其首尾节点的相对位置，生成符合要求的贝塞尔路径即可——本质上是把树图链接的端点处理逻辑移植到力导向图的链接绘制上。

具体实现方法 #

方法1：自定义贝塞尔路径函数

假设你的节点是固定尺寸的矩形（比如宽100，高50），可以直接写一个路径生成函数，动态计算每个链接的端点和控制点：

// 自定义链接路径生成函数（水平端点样式）
function generateLinkPath(d) {
  // 节点的半宽/半高（根据你的实际节点尺寸调整）
  const halfWidth = 50;
  const halfHeight = 25;
  
  // 获取首尾节点的坐标
  const { x: sx, y: sy } = d.source;
  const { x: tx, y: ty } = d.target;
  
  // 计算source节点的出口点：根据target位置选择节点左/右侧边缘
  const sourceExitX = sx + (tx > sx ? halfWidth : -halfWidth);
  const sourceExitY = sy;
  
  // 计算target节点的入口点：根据source位置选择节点左/右侧边缘
  const targetEntryX = tx + (sx < tx ? -halfWidth : halfWidth);
  const targetEntryY = ty;
  
  // 计算贝塞尔曲线的中间控制点（让曲线平滑过渡）
  const midY = (sourceExitY + targetEntryY) / 2;
  
  // 返回贝塞尔路径字符串
  return `M ${sourceExitX},${sourceExitY} C ${sourceExitX},${midY} ${targetEntryX},${midY} ${targetEntryX},${targetEntryY}`;
}

然后在绘制链接时，把这个函数传给attr("d")：

// 绘制链接
svg.append("g")
  .selectAll("path")
  .data(links)
  .join("path")
  .attr("d", generateLinkPath)
  .attr("stroke", "#ccc")
  .attr("fill", "none")
  .attr("stroke-width", 1.5);

方法2：复用D3树图的链接生成器

如果你想直接用D3现成的d3.linkHorizontal或d3.linkVertical生成器，只需要稍微调整节点的坐标，让它们指向节点的边缘而非中心：

// 初始化树图链接生成器（水平端点样式）
const linkGenerator = d3.linkHorizontal()
  .x(d => d.x)
  .y(d => d.y);

function generateLinkPath(d) {
  const halfWidth = 50;
  // 调整首尾节点的坐标，让它们指向节点边缘
  const adjustedSource = {
    x: d.source.x + (d.target.x > d.source.x ? halfWidth : -halfWidth),
    y: d.source.y
  };
  const adjustedTarget = {
    x: d.target.x + (d.source.x < d.target.x ? -halfWidth : halfWidth),
    y: d.target.y
  };
  // 用树图链接生成器生成路径
  return linkGenerator({ source: adjustedSource, target: adjustedTarget });
}

适配垂直端点的样式

如果想要垂直方向的端点（类似水平树的链接样式），只需要交换x和y的逻辑：

// 自定义垂直端点的链接路径函数
function generateVerticalLinkPath(d) {
  const halfHeight = 25;
  const { x: sx, y: sy } = d.source;
  const { x: tx, y: ty } = d.target;
  
  const sourceExitY = sy + (ty > sy ? halfHeight : -halfHeight);
  const sourceExitX = sx;
  
  const targetEntryY = ty + (sy < ty ? -halfHeight : halfHeight);
  const targetEntryX = tx;
  
  const midX = (sourceExitX + targetEntryX) / 2;
  
  return `M ${sourceExitX},${sourceExitY} C ${midX},${sourceExitY} ${midX},${targetEntryY} ${targetEntryX},${targetEntryY}`;
}

额外提示 #

• 如果你的节点尺寸是动态的（比如根据内容自动调整），可以把halfWidth和halfHeight改成从节点数据中读取，比如d.source.width / 2。
• 可以根据需要调整贝塞尔控制点的位置，让曲线的弯曲程度更符合你的视觉需求。

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