#npm 包 d3-parallel-links 使用教程
d3-parallel-links是一个基于D3.js实现的可视化库，它可以帮助开发人员在Web应用程序中构建出并列连接图。并列连接图主要用于可视化多个数据集之间的关系，通常用于展示基于时间序列的数据或事件的关系。
安装
在使用前需要先在命令行中安装d3-parallel-links
npm install d3-parallel-links
同时，需要在HTML文件中引入D3.js和d3-parallel-links的脚本文件。
<script src="https://d3js.org/d3.v5.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/d3-parallel-links@0.1.0/dist/d3-parallel-links.min.js"></script>
d3-parallel-links还支持在ES6模块化的环境中使用，通过import来引入。
import * as d3 from 'd3'; import 'd3-parallel-links';
基本用法
数据格式
d3-parallel-links支持的数据格式为二维数组，每个子数组代表一个连接序列，连接序列中每个对象包含from、to、value三个属性，用于表示连接的起点、终点以及连接的值。
-- -------------------- ---- -------
-
-
------ ---- --- ---- ------ ----
------ ---- --- ---- ------ --
--
-
------ ---- --- ---- ------ ----
------ ---- --- ---- ------ --
-
-初始化配置
在创建d3-parallel-links实例之前，需要通过d3.parallelLinks()函数先设置好配置参数，包括容器元素、连接的方向、连接点的颜色、连接点的尺寸等等。
-- -------------------- ---- ------- ----- ------ - - ---------- ------------------------------------------ ---------- ------------- ---------- -------- ----------- - -- ----- ------------- - -------------------------
绘图
在d3-parallel-links配置完成后，可以通过调用其instance()方法获取其实例对象，然后调用该对象的data()方法，传入待可视化的两端数据，再调用该对象的render()方法来绘制并列连接图。
-- -------------------- ---- -------
----- ---- - -
-
------ ---- --- ---- ------ ----
------ ---- --- ---- ------ --
--
-
------ ---- --- ---- ------ ----
------ ---- --- ---- ------ --
-
--
----- -------- - -------------------------
-------------------
----------其他配置
还可以通过config对象中的属性来设置更多的配置，比如设置连接线的宽度、颜色、透明度、线条样式等等。
-- -------------------- ---- ------- ----- ------ - - ---------- ------------------------------------------ ---------- ------------- ---------- -------- ----------- -- ---------- -- ---------- -------- ------------ ---- ---------- ------- --
示例
以下是一个使用d3-parallel-links绘制并列连接图的示例代码。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------ ------------
-------
---- -
------- --
-------- --
-
--------------- -
------ -----
------- ------
-
--------
-------
------
---- --------------------------
------- ---------------------------------------------
------- --------------------------------------------------------------------------------------------------
--------
----- ---- - -
-
------ ---- --- ---- ------ ----
------ ---- --- ---- ------ --
--
-
------ ---- --- ---- ------ ----
------ ---- --- ---- ------ --
-
--
----- ------ - -
---------- ------------------------------------------
---------- -------------
---------- --------
----------- --
---------- --
---------- --------
------------ ----
---------- -------
--
----- ------------- - -------------------------
----- --------------------- - -------------------------
------------------------------------------
---------
-------
-------总结
d3-parallel-links是一个非常实用的库，它可以方便地绘制出并列连接图，用于展示以时间序列为基础的数据或事件的关系，可以用于数据可视化或者业务实现中。本文介绍了d3-parallel-links的安装和基本用法，希望读者可以通过本文掌握如何使用d3-parallel-links来绘制并列连接图。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568c681e8991b448e48ac