简介
on-taskgraph-y2 是一个基于 D3.js 的、专门用于可视化任务流的 npm 包。其主要功能是绘制可以拖拽、连线、编辑、删除等功能的任务流图，同时具有良好的响应式布局和交互效果。
用法
安装
在安装之前请确认你已经安装了 Node.js，然后在终端中输入以下命令进行安装：
npm install on-taskgraph-y2
引入
在需要使用 on-taskgraph-y2 的页面中，可以通过以下方式引入 npm 包：
import TaskGraph from 'on-taskgraph-y2';
也可以使用 script 标签直接引入：
<script src="./node_modules/on-taskgraph-y2/dist/on-taskgraph-y2.min.js"></script>
使用
引入完毕后，就可以在页面中使用 TaskGraph 类创建任务流图了。在创建 TaskGraph 实例之前，需要确定容器的尺寸和样式：
<div id="taskGraph" style="width: 100%; height: 500px;"></div>
然后在 JavaScript 中创建 TaskGraph 实例并传入容器元素的 ID：
const taskGraph = new TaskGraph('#taskGraph');最后，通过初始化参数配置任务流图的样式和互动操作：
-- -------------------- ---- -------
----------------
---------- ----
----------- ---
------------- -------
--------------- ----------
------------- ----------
---------------- ----------
-------------- ----------
---------------- ----------
----------- ----------
----------- --
----- ----- ---- -------
-------------- ------ -- -
------------------ ------- ------
--
-------------- ------ -- -
------------------ ------- ------
-
---on-taskgraph-y2 的配置项和事件回调非常详细，可以根据实际需求进行灵活地调整和扩展。接下来我们将对每个配置项和事件回调进行详细解释。
参数配置
nodeWidth: 任务流图中节点的宽度，默认值为 120；nodeHeight: 任务流图中节点的高度，默认值为 80；nodeTitleKey: 任务流图中节点要显示的标题属性名，默认值为'name'；startNodeColor: 任务流图中开始节点的颜色，默认值为'#32A4F4'；endNodeColor: 任务流图中结束节点的颜色，默认值为'#32A4F4'；normalNodeColor: 任务流图中普通节点的颜色，默认值为'#F5A623'；nodeTextColor: 任务流图中节点标题的颜色，默认值为'#FFFFFF'；nodeBorderColor: 任务流图中节点边框的颜色，默认值为'#E1E1E1'；arrowColor: 任务流图中箭头和连线的颜色，默认值为'#E1E1E1'；arrowWidth: 任务流图中箭头和连线的宽度，默认值为 6；font: 任务流图中节点标题的字体样式，默认值为'bold 14px Arial'。
事件回调
onNodeClicked: 当点击任务流图中的节点时触发的回调函数，参数是被点击的节点对象；onLinkClicked: 当点击任务流图中的连线时触发的回调函数，参数是被点击的连线对象。
示例代码
-- -------------------- ---- -------
------ --------- ---- ------------------
----- --------- - --- ------------------------
----------------
---------- ----
----------- ---
------------- -------
--------------- ----------
------------- ----------
---------------- ----------
-------------- ----------
---------------- ----------
----------- ----------
----------- --
----- ----- ---- -------
-------------- ------ -- -
------------------ ------- ------
--
-------------- ------ -- -
------------------ ------- ------
-
---
----- ----- - -
- --- ---- ----- --- --- -- ---- -- --- --
- --- ---- ----- --- --- -- ---- -- --- --
- --- ---- ----- --- --- -- ---- -- --- --
- --- ---- ----- --- --- -- ---- -- --- -
--
----- ----- - -
- --- ---- --------- ---- --------- --- --
- --- ---- --------- ---- --------- --- --
- --- ---- --------- ---- --------- --- --
- --- ---- --------- ---- --------- --- -
--
----------------------- -------总结
on-taskgraph-y2 是一个非常实用的 npm 包，可以让开发者轻松地绘制出具有拖拽、连线、编辑、删除等互动操作的任务流图。本文详细地讲解了 on-taskgraph-y2 的安装、引入和使用方法，以及详细介绍了其配置项和事件回调的含义和功能。希望这篇文章能够帮助到需要使用 on-taskgraph-y2 的开发人员，让其能够更加方便、高效地完成任务流图的设计和开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d7481e8991b448db340