前端vue3项目dagre-d3基础配置项及流程图组件示例（包括安装依赖）

目录

引言

d3是什么？

dagre是什么？

dagre-d3是什么？

dagre-d3配置项

流程图示例

依赖安装

组件示例

总结

---

引言

因为很多文档都是英文，刚开始调研的时候比较费劲，文档里的配置像示例又比较分散，就自己整理了一下，附上测试时写的示例

d3是什么？

d3.js 是一个强大的JavaScript库，用于在Web上生成动态、交互式的数据可视化。并且提供了大量用于处理数据和创建图形的函数和方法。这些函数和方法可以组合在一起，以创建从简单的条形图到复杂的网络图等各种类型的可视化。

官网文档：

D3 by Observable | The JavaScript library for bespoke data visualizationThe JavaScript library for bespoke data visualizationhttps://d3js.org/

dagre是什么？

Dagre是一个JavaScript库，主要用于创建有向图（Directed Graph）。可以为你的应用或网站创建美观、易读的图表，特别适合于数据可视化、流程图和状态机等场景。

Dagre提供了一套简单的API，允许开发者将节点和边的数据结构转换为具有良好视觉效果的图形布局。其核心算法优化了节点和边的排列方式，使得整个图看起来更加清晰且有逻辑性。此外，Dagre还能兼容各种图形渲染库，如d3.js和svg.js，进一步增强了其灵活性。

dagre-d3是什么？

Dagre-D3是基于d3的dagre渲染器，是dagre的前端子库，底层使用D3进行渲染。Dagre-D3提供了一些渲染选项，使得使用Dagre创建的图形能够以更美观和交