当前位置：首页 > VUE

vue实现Dag图

2026-03-30 04:01:22VUE

Vue 实现 DAG 图的方法

使用第三方库

推荐使用 vue-d3-dag 或 dagre-d3 等库快速实现 DAG 图。这些库封装了 D3.js 的力导向图或层次布局，提供 Vue 组件化支持。

安装依赖：

npm install vue-d3-dag dagre-d3

示例代码：

<template>
  <div ref="dagContainer"></div>
</template>

<script>
import * as d3 from 'd3';
import dagreD3 from 'dagre-d3';

export default {
  mounted() {
    const graph = new dagreD3.graphlib.Graph().setGraph({});

    // 添加节点和边
    graph.setNode('A', { label: 'Node A' });
    graph.setNode('B', { label: 'Node B' });
    graph.setEdge('A', 'B');

    const render = new dagreD3.render();
    const svg = d3.select(this.$refs.dagContainer).append('svg');
    const inner = svg.append('g');
    render(inner, graph);
  }
};
</script>

自定义实现方案

若需完全自定义，可通过以下步骤实现：

数据结构设计 定义节点和边的数据结构：

nodes: [
{ id: 'A', x: 100, y: 100 },
{ id: 'B', x: 300, y: 200 }
],
edges: [
{ source: 'A', target: 'B' }
]

SVG 渲染 使用 Vue 的 v-for 指令动态渲染：


<template>
<svg width="800" height="600">
 <g v-for="node in nodes" :key="node.id">
   <circle :cx="node.x" :cy="node.y" r="20" fill="#42b983"/>
   <text :x="node.x" :y="node.y" dy="5" text-anchor="middle">{{ node.id }}</text>
 </g>
 <path v-for="(edge, index) in edges" :key="index" 
       :d="calcPath(edge)" stroke="#999" fill="none"/>
</svg>
</template>

export default { methods: { calcPath(edge) { const src = this.nodes.find(n => n.id === edge.source); const tgt = this.nodes.find(n => n.id === edge.target); return `M${src.x},${src.y} L${tgt.x},${tgt.y}`; } } }; ```

交互功能 添加拖拽和连线事件：

handleDrag(event, node) {
node.x = event.clientX;
node.y = event.clientY;
}

布局算法集成

对于复杂 DAG，需集成自动布局算法如 dagre：

vue实现Dag图

import dagre from 'dagre';

applyLayout() {
  const g = new dagre.graphlib.Graph();
  g.setGraph({ rankdir: 'LR' });
  this.nodes.forEach(node => g.setNode(node.id, { width: 40, height: 40 }));
  this.edges.forEach(edge => g.setEdge(edge.source, edge.target));
  dagre.layout(g);
  g.nodes().forEach(id => {
    const node = this.nodes.find(n => n.id === id);
    node.x = g.node(id).x;
    node.y = g.node(id).y;
  });
}