项目中想搞定一个流程图, 开始使用了阿里的 G6, 但是 G6 目前不支持手势, 这样就很郁闷了, 因为公司的领导都是使用 iPad 看的, 你不支持手势是不行的, 后来又想到了百度的 echarts, 试了试, 感觉还不错, 手机端也是没问题的, 但是用起来不是很好用, 每个节点的位置还要自己去设置计算有点麻烦, 所以想找个在支持 pc 和 wap 并且使用方便的, 结果找到了 dagre-d3.JS, 完全满足我的需求啊, 就是文档不全, 还大多数都是英文. 搞完之后觉得有必要记录一下, 哈哈哈.
首先避免不了的就是下载, 既然是基于 d3 的肯定是要连同 d3 一下下载的.
- NPM install d3
- NPM install dagre-d3
下载完毕就开始使用了, 如果下载的时候报错了可以尝试 cnpm 下载.
下载完之后就要说说数据结构了, 如下图:
,
从图中我们可以知道需要两个数据, 第一个是节点信息, 包含节点名称, ID, 状态等等只要是节点信息都可以放在里边; 第二个是节点之间的关系, 可以简单的理解成管道, 比如从节点 1---> 节点 2.
所以我们的数据结构是这样的:
- list: {
- nodeInfos: [
- {
- id: "node1",
- label: "节点 1",
- },
- {
- id: "node2",
- label: "节点 2",
- },
- {
- id: "node3",
- label: "节点 3",
- },
- {
- id: "node4",
- label: "节点 4",
- },
- ],
- edges: [
- {
- source: "node1",
- target: "node2",
- },
- {
- source: "node2",
- target: "node3",
- },
- {
- source: "node2",
- target: "node4",
- },
- ]
- }
其中 nodeInfos 是节点信息, edges 是节点之间的关系, 当然节点的信息可以包含很多信息, 比如节点的形状, 大小, 背景颜色, 圆角等等, 同时也可以在设置节点信息的时候添加或者根据你自己节点的状态判断显示什么样的样式. 接下来就是绘制流程图了, 首先呢需要先获取实例对象并且做一些简单的配置. 我们直接使用默认的就可以.
1 var g = new dagreD3.graphlib.Graph().setGraph({}).setDefaultEdgeLabel(function() { return {}; });
接下来就是添加节点
- this.list.nodeInfos.forEach((item, index) => {
- g.setNode(item.id, item);
- });
然后在加上节点关系
- this.list.edges.forEach(item => {
- g.setEdge(item.source, item.target, {});
- });
最后就是绘制图形了
- var svg = d3.select("svg"),
- i nner = svg.select("g");
- // 缩放
- var zoom = d3.zoom().on("zoom", function () {
- inner.attr("transform", d3.event.transform);
- });
- svg.call(zoom);
- var render = new dagreD3.render();
- render(inner, g);
这样简单的流程图就完成了, 如果想加点击事件呢, 可以这样
- let code;
- inner.selectAll("g.node").on("click", e => {
- // 点击事件
- code = this.list.nodeInfos.filter(item => {
- return item.id == e;
- });
- console.log(code);
- });
最最简单的一个流程图组件就完成了, 当然了 dagre-d3.JS 不仅仅是这点功能, 还有许多可以设置的, 大家多练一练就可以喽.
demo 地址: https://gitee.com/webliusong/dagre-d3
来源: https://www.cnblogs.com/liushusong/p/11996770.html