dagre/dagre-d3绘制流程图

最新推荐文章于 2025-11-25 08:51:10 发布

原创

最新推荐文章于 2025-11-25 08:51:10 发布 · 9.4k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html5 #d3.js

本文介绍了如何利用dagre和dagre-d3库创建和渲染有向流程图，包括引入库文件、创建Graph对象、配置节点和边、设置渲染器等步骤。详细讲解了graph、node和edge的配置选项，如rankdir、shape、style等，并展示了实现拖拽缩放和鼠标悬停tooltip的交互功能。此外，还提供了关键知识点和配置示例。

dagre/dagre-d3绘制流程图

- 概念
- 步骤
- 知识点
- 配置项
- 交互
- - 拖拽缩放
  - 鼠标悬停 tootip
- 参考

概念

dagre 是专注于有向图布局的 javascript 库，由于 dagre 仅仅专注于图形布局 #F44336，需要使用其他方案根据 dagre 的布局信息来实际渲染图形，而 dagre-d3 就是 dagre 基于 D3 的渲染方案。

dagre: https://github.com/dagrejs/dagre

dagre-d3: https://github.com/dagrejs/dagre-d3

步骤

引入 d3.js 以及 dagre-d3.js 两个文件。
使用 dagre-d3 创建 Graph 对象，并添加节点和边。
创建渲染器并在 svg 上绘制流程图。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="node_modules/d3/dist/d3.min.js"></script>
  <script src="node_modules/dagre-d3/dist/dagre-d3.min.js"></script>
</head>
<body>
  <div>
    <svg style="width:800px;height:800px"></svg>
  </div>
</body>
</html>
<script>
  let dataset = {
     
     
    nodes: