如何使用Dagre（或同类图可视化库）在固定节点位置的前提下仅计算边缘路径

我刚好遇到过类似的需求，其实Dagre本身就支持固定节点位置后仅计算边的路径，只是你没找对传递固定位置的方式。下面给你一步步解决的方案：

一、Dagre的直接解决方案 #

你之前的问题核心是没有把固定位置绑定到Dagre的节点属性上，导致布局算法重新计算了所有节点位置。只需要在设置节点时传入固定坐标，同时标记节点为“固定”，Dagre就会跳过节点位置计算，只处理边的路径生成。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Fixed Nodes + Dagre Edge Layout</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <script src="https://unpkg.com/@dagrejs/dagre@1.0.2/dist/dagre.js"></script>
  <style>
    #graph {
      width: 100%;
      height: 600px;
      background-color: #f9f9f9;
    }
    .node rect {
      stroke: #333;
      fill: #fff;
      stroke-width: 1px;
    }
    .node text {
      font: 12px sans-serif;
    }
    .edge {
      stroke: #333;
      stroke-width: 1px;
      fill: none;
    }
  </style>
</head>
<body>
  <div id="graph"></div>
  <script>
    // 固定节点位置（外部传入，不可修改）
    const fixedPositions = {
      A: { x: 300, y: 50 },
      B: { x: 150, y: 150 },
      C: { x: 450, y: 150 },
      D: { x: 100, y: 250 }
    };

    // 邻接表
    const adjList = { 
      "A": ["B", "C"], 
      "B": ["D"], 
      "C": [], 
      "D": [] 
    };

    // 初始化Dagre图
    const g = new dagre.graphlib.Graph();
    g.setGraph({
      // 配置布局：禁用不必要的节点间距计算，专注边路由
      nodesep: 0,
      ranksep: 0
    });
    g.setDefaultEdgeLabel(() => ({}));

    // 添加节点：绑定固定位置
    Object.keys(adjList).forEach(node => {
      const { x, y } = fixedPositions[node];
      g.setNode(node, {
        label: node,
        width: 50,
        height: 30,
        x: x,
        y: y,
        fixed: true // 标记节点为固定，Dagre不会修改其位置
      });
    });

    // 添加边
    Object.entries(adjList).forEach(([node, edges]) => {
      edges.forEach(target => g.setEdge(node, target));
    });

    // 执行布局：此时仅计算边的路径，节点位置保持固定
    dagre.layout(g);

    // D3渲染部分
    const svg = d3.select("#graph")
      .append("svg")
      .attr("width", "100%")
      .attr("height", "100%");

    const inner = svg.append("g");

    // 缩放行为
    const zoom = d3.zoom().on("zoom", event => {
      inner.attr("transform", event.transform);
    });
    svg.call(zoom);

    // 渲染节点
    const nodes = inner.selectAll(".node")
      .data(g.nodes())
      .enter()
      .append("g")
      .attr("class", "node")
      .attr("transform", v => {
        const node = g.node(v);
        // 直接使用固定位置（也可以用node.x/node.y，因为Dagre没修改）
        return `translate(${node.x}, ${node.y})`;
      });

    nodes.append("rect")
      .attr("width", v => g.node(v).width)
      .attr("height", v => g.node(v).height)
      .attr("x", v => -g.node(v).width / 2)
      .attr("y", v => -g.node(v).height / 2);

    nodes.append("text")
      .attr("text-anchor", "middle")
      .attr("dominant-baseline", "central")
      .text(v => v);

    // 渲染边：使用Dagre计算的路径点
    const line = d3.line()
      .x(d => d.x)
      .y(d => d.y)
      .curve(d3.curveBasis);

    inner.selectAll(".edge")
      .data(g.edges())
      .enter()
      .append("path")
      .attr("class", "edge")
      .attr("d", e => line(g.edge(e).points));

    // 自动缩放适配
    const graphBounds = inner.node().getBBox();
    const width = svg.node().clientWidth;
    const height = svg.node().clientHeight;
    const scale = Math.min(width / graphBounds.width, height / graphBounds.height) * 0.9;
    const translate = [
      (width - graphBounds.width * scale) / 2 - graphBounds.x * scale,
      (height - graphBounds.height * scale) / 2 - graphBounds.y * scale
    ];
    svg.call(zoom.transform, d3.zoomIdentity.translate(translate[0], translate[1]).scale(scale));
  </script>
</body>
</html>

关键修改点说明 #

1. 在g.setNode时传入x、y和fixed: true，直接把固定位置绑定到节点属性，告诉Dagre不要调整这个节点的位置。
2. 图配置中设置nodesep: 0和ranksep: 0，避免Dagre为节点添加额外间距（因为节点位置已经固定）。
3. 布局后，节点的x/y仍然是你传入的固定值，而边的points属性是Dagre计算出的最优路径，会自动绕开其他节点，比直线更美观。

二、替代方案：使用ELK.js（更灵活的边路由） #

如果Dagre的边路由满足不了你的需求，推荐试试ELK.js——它是一个功能更强的图布局库，对固定节点的支持更完善，还能处理复杂的边绕路逻辑。

核心思路是：

1. 构建ELK的图结构，给每个节点设置固定位置，并标记为“不可移动”。
2. 调用ELK布局，指定算法为仅处理边路由。
3. 用D3渲染节点和边。

示例代码片段：

import ELK from 'elkjs';
const elk = new ELK();

// 构建ELK图
const elkGraph = {
  id: "root",
  children: Object.keys(fixedPositions).map(node => ({
    id: node,
    width: 50,
    height: 30,
    x: fixedPositions[node].x,
    y: fixedPositions[node].y,
    layoutOptions: {
      "org.eclipse.elk.position.fixed": "true" // 固定节点位置
    }
  })),
  edges: Object.entries(adjList).flatMap(([from, tos]) => 
    tos.map(to => ({ id: `${from}-${to}`, sources: [from], targets: [to] }))
  )
};

// 执行布局：仅计算边路径
elk.layout(elkGraph, {
  algorithm: "layered",
  layoutOptions: {
    "org.eclipse.elk.algorithm": "layered",
    "org.eclipse.elk.layered.nodePlacement.strategy": "BRANDES_KOEPF"
  }
}).then(layoutedGraph => {
  // 用D3渲染layoutedGraph中的节点和边
  // 节点位置保持fixedPositions，边使用layoutedGraph.edges中的bendPoints
});

总结 #

• 优先用Dagre的修改方案：代码改动小，和你原有的实现无缝衔接，完全满足“固定节点+自动边路由”的需求。
• 如果需要更复杂的边绕路或自定义路由规则，ELK.js是更好的选择，它的配置更精细，支持更多布局场景。

内容来源于stack exchange