简介
dagre-d3-webpack 是一种基于 webpack 的 Dagre 和 D3 打包工具。它实现了一个从图形到布局到渲染的完整流程。
Dagre 是一款在浏览器和 Node.js 环境下运行的 JavaScript 库，提供了一种使用拓扑图布局算法来可视化有向图和无向图的方式。
D3 是一款可视化库，可以把图形数据转换成 SVG 或 Canvas 形式展现在页面上。它提供了很多常用的可视化图形，也支持自定义图形的绘制。
dagre-d3-webpack 利用 webpack 的强大功能将这两个库打包成一个模块，方便前端开发者使用。
安装
npm install --save dagre-d3-webpack
使用
使用 dagre-d3-webpack，可以通过简单的几个步骤进行图形的可视化，具体如下：
- 引入 dagre-d3-webpack 模块
import { dagreD3 } from 'dagre-d3-webpack'- 创建画布
const svg = d3.select('body').append('svg')
.attr('width', 800)
.attr('height', 600)- 准备数据
-- -------------------- ---- -------
----- ----- - -
---- ---- ------ ----- --- ------ ----------
---- ---- ------ ----- --- ------ ----------
---- ---- ------ ----- --- ------ ----------
---- ---- ------ ----- --- ------ ----------
-
----- ----- - -
-------- ---- ------- ---- ------ ----- ----
-------- ---- ------- ---- ------ ----- ----
-------- ---- ------- ---- ------ ----- ----
-------- ---- ------- ---- ------ ----- ----
-- 创建布局
-- -------------------- ---- -------
----- ------ - ----------------------
------------
------------
--------------
--------------
---------------
-------------- -- --------
------------ ------
------- 创建点和边
-- -------------------- ---- -------
----- ----- - ----------------------
------------
--------------------
-------------- -------
--------------------
---------- --- -- -- --------------------------- - -----------------------------
--------------- --------
------------- -------
--------------------
------------------ --- -- ------------------------ - ----------- - ---------------- - ----------- - -----
-------------------- ---------
--------- -- --------
----- ----- - ----------------------
------------
--------------------
-------------- --- -- ----- ------------
--------------------
---------- --- -- --- - ------- - --
---------- --- -- --- - -------- - --
-------------- --- -- --------
--------------- --- -- ---------
--------------------
---------- --- -- ----
---------- --- -- --- - -------- - - - --
-------------------- ---------
--------- -- --------示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------ - ------- - ---- ------------------
----- --- - -------------------------------
-------------- ----
--------------- ----
----- ----- - -
---- ---- ------ ----- --- ------ ----------
---- ---- ------ ----- --- ------ ----------
---- ---- ------ ----- --- ------ ----------
---- ---- ------ ----- --- ------ ----------
-
----- ----- - -
-------- ---- ------- ---- ------ ----- ----
-------- ---- ------- ---- ------ ----- ----
-------- ---- ------- ---- ------ ----- ----
-------- ---- ------- ---- ------ ----- ----
-
----- ------ - ----------------------
------------
------------
--------------
--------------
---------------
-------------- -- --------
------------ ------
------
----- ----- - ----------------------
------------
--------------------
-------------- -------
--------------------
---------- --- -- -- --------------------------- - -----------------------------
--------------- --------
------------- -------
--------------------
------------------ --- -- ------------------------ - ----------- - ---------------- - ----------- - -----
-------------------- ---------
--------- -- --------
----- ----- - ----------------------
------------
--------------------
-------------- --- -- ----- ------------
--------------------
---------- --- -- --- - ------- - --
---------- --- -- --- - -------- - --
-------------- --- -- --------
--------------- --- -- ---------
--------------------
---------- --- -- ----
---------- --- -- --- - -------- - - - --
-------------------- ---------
--------- -- --------总结
dagre-d3-webpack 提供了一种较为简单的方式进行图形的可视化，使用前只需要了解基本的 Dagre 和 D3 知识即可。它将 Dagre 和 D3 打包成一个模块，使得前端开发者能更加方便快速地进行图形可视化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea381e8991b448dbfe1