G6
G2
G6
F2
L7
墨者学院
关于 G6
图表示例
API 文档
使用教程
返回旧版
树图
紧凑树
系统树
脑图树
辐射树
树图-边上显示label
文件系统
自定义树图
大数据量的树图
流图
桑基图
流程图
ER图
自定义流程图
网图
力导图
小米关系图谱
弧线图
环形弧线图
图布局
Circular 环图参数变化
Fruchterman 布局参数变化
Dagre 参数变化
Radial 布局参数变化
Radial 交互扩展节点
点击扩展节点
布局数据变化
子图布局
自定义布局 - 二分图
布局的时机监听
Bubbles 力导气泡
树和气泡
动画
状态切换
节点动画
默认动画
自定义动画
自定义元素
卡片节点
饼图节点
列表节点
面积图节点
环形柱状图节点
折线图节点
标注图节点
堆积柱状图节点
自定义折线方法1
自定义折线方法2
自定义箭头
交互
切换节点图片
动态加载数据
动态加载多条数据
Circle节点分组
Rect节点分组
文本
省略文本
文本换行
元素样式
内置节点和边
贝塞尔曲线
多标签节点
多标签边
辅助工具
Tooltip 节点和边的提示框
Minimap 缩略图
Grid 网格
Context Menu 右键菜单
响应节点区域事件
点击节点移动到中心
复杂案例
美国航线边绑定
北京地铁
聚类的折叠/扩展交互
自定义资金流转图
自定义流程图
源码
复制成功
复制失败
全屏
复制
运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义流程图</title> <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style> </head> <body> <div id="mountNode"></div> <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js"></script> <script src="https://gw.alipayobjects.com/os/lib/dagre/0.8.4/dist/dagre.min.js"></script> <script> var _extends = Object.assign || function(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /** * 本案例演示如何使用G6自定义流程图: * 1、如何使用G6绘制流程图; * 2、如何在贝塞尔曲线上面自定义icon; * 3、如何响应贝塞尔曲线上icon的点击事件。 * * by 一之 * */ /** * node 特殊属性 */ var nodeExtraAttrs = { begin: { fill: "#9FD4FB" }, end: { fill: "#C2E999" } }; var data = { nodes: [{ id: "1", label: "请求回放1(开始)", type: "begin" }, { id: "2", label: "交易创建" }, { id: "3", label: "请求回放3" }, { id: "4", label: "请求回放4" }, { id: "5", label: "请求回放5" }, { id: "6", label: "请求回放6" }, { id: "7", label: "请求回放2(结束)", type: "end" }], edges: [{ source: "1", target: "2" }, { source: "1", target: "3" }, { source: "2", target: "5" }, { source: "5", target: "6" }, { source: "6", target: "7" }, { source: "3", target: "4" }, { source: "4", target: "7" }] }; /** * 自定义节点 */ G6.registerNode("node", { drawShape: function drawShape(cfg, group) { var rect = group.addShape("rect", { attrs: _extends({ x: -75, y: -25, width: 150, height: 50, radius: 4, fill: "#FFD591", fillOpacity: 1 }, nodeExtraAttrs[cfg.type]) }); return rect; }, // 设置状态 setState: function setState(name, value, item) { var group = item.getContainer(); var shape = group.get("children")[0]; // 顺序根据 draw 时确定 if (name === "selected") { if (value) { shape.attr("fill", "#F6C277"); } else { shape.attr("fill", "#FFD591"); } } }, getAnchorPoints: function getAnchorPoints() { return [[0, 0.5], [1, 0.5]]; } }, "single-shape"); /** * 自定义 edge 中心关系节点 */ G6.registerNode("statusNode", { drawShape: function drawShape(cfg, group) { var circle = group.addShape("circle", { attrs: { x: 0, y: 0, r: 6, fill: cfg.active ? "#AB83E4" : "#ccc" } }); return circle; } }, "single-shape"); /** * 自定义带箭头的贝塞尔曲线 edge */ G6.registerEdge("line-with-arrow", { itemType: "edge", draw: function draw(cfg, group) { var startPoint = cfg.startPoint; var endPoint = cfg.endPoint; var centerPoint = { x: (startPoint.x + endPoint.x) / 2, y: (startPoint.y + endPoint.y) / 2 }; // 控制点坐标 var controlPoint = { x: (startPoint.x + centerPoint.x) / 2, y: startPoint.y }; console.log(cfg, startPoint, endPoint); // 为了更好的展示效果, 对称贝塞尔曲线需要连到箭头根部 var path = group.addShape("path", { attrs: { path: [["M", startPoint.x, startPoint.y], ["Q", controlPoint.x + 8, controlPoint.y, centerPoint.x, centerPoint.y], ["T", endPoint.x - 8, endPoint.y], ["L", endPoint.x, endPoint.y]], stroke: "#ccc", lineWidth: 1.6, endArrow: { path: "M 4,0 L -4,-4 L -4,4 Z", d: 4 } } }); // 如果是不对称的贝塞尔曲线,需要计算贝塞尔曲线上的中心点 // 参考资料 https://stackoverflow.com/questions/54216448/how-to-find-a-middle-point-of-a-beizer-curve // 具体Util方法可以参考G:https://github.com/antvis/g/blob/4.x/packages/g-math/src/quadratic.ts // 在贝塞尔曲线中心点上添加圆形 var source = cfg.source, target = cfg.target; group.addShape("circle", { attrs: { id: "statusNode" + source + "-" + target, r: 6, x: centerPoint.x, y: centerPoint.y, fill: cfg.active ? "#AB83E4" : "#ccc" } }); return path; } }); var g = new dagre.graphlib.Graph(); g.setDefaultEdgeLabel(function() { return {}; }); g.setGraph({ rankdir: 'LR' }); data.nodes.forEach(function(node) { g.setNode(node.id + '', { width: 150, height: 50 }); }); data.edges.forEach(function(edge) { edge.source = edge.source + ''; edge.target = edge.target + ''; g.setEdge(edge.source, edge.target); }); dagre.layout(g); var coord = void 0; g.nodes().forEach(function(node, i) { coord = g.node(node); data.nodes[i].x = coord.x; data.nodes[i].y = coord.y; }); g.edges().forEach(function(edge, i) { coord = g.edge(edge); var startPoint = coord.points[0]; var endPoint = coord.points[coord.points.length - 1]; data.edges[i].startPoint = startPoint; data.edges[i].endPoint = endPoint; data.edges[i].controlPoints = coord.points.slice(1, coord.points.length - 1); }); var graph = new G6.Graph({ container: "mountNode", width: 1000, height: 800, modes: { default: ['drag-canvas'] }, defaultNode: { shape: "node", labelCfg: { style: { fill: "#fff", fontSize: 14 } } }, defaultEdge: { shape: "line-with-arrow" }, edgeStyle: { default: { endArrow: true, lineWidth: 2, stroke: "#ccc" } } }); graph.data(data); graph.render(); graph.on('edge:click', function(evt) { var target = evt.target; var type = target.get('type'); if (type === 'circle') { // 点击边上的circle alert('你点击的是边上的圆点'); } }); </script> </body> </html>