welabx-g6
v0.8.1
Published
welabx - antv G6
Downloads
27
Readme
G6 流程图
在线 Demo
https://keman5.github.io/welabx-g6/dist/?_blank
欢迎关注我的 B 站教程, 不定时更新, 讲解各种图形绘制以及问题解决思路, 带你领略可视化的魅力：bilibli
G6 五十问：五十个问题及解答
中文文档：https://github.com/keman5/welabx-g6/blob/master/GUIDE.md
起源
公司项目中需要用到涉及表示关系的图谱，在d3可以满足需求的情况下，发现了G6。在对比了性能和技术后续迭代，选择了G6作为技术支撑。
面向人群
🙋 适用于需要靠绘图来表达和描述关系的项目 🙋 官网所有支持的布局均可使用 🙋 以及领域相关的开发者
已完成功能
😎 自定义节点和边, 支持锚点配置
😎 自定义圆形, 方形, 椭圆, 菱形节点
😎 节点支持拖拽连线, 删除(按delete键), 编辑
😎 边默认带结束箭头, 支持标签显示
😎 支持自定义 tool-tip 内容
😎 支持画布/节点/边事件监听
TODO
- [x] 给节点设置图标
- [x] 边偶尔会被选中
- [x] 边动态动画
- [x] 拖拽边高亮及时消失
- [x] 节点和边 tooltip
- [x] 椭圆, 平行四边形节点
- [x] 边支持编辑箭头
- [x] 双击节点编辑标签
- [x] 画布缩放时的拖拽兼容
- [x] 解决拖拽时 null文字残留
- [x] 点击节点时将节点层级提升
- [x] 拖拽画布后拖拽锚点虚线位置错误
- [x] 节点多选(shift), 拖动框选节点
- [ ] 拖拽节点到画布边缘时自动滚动画布可见范围
- [ ] 高亮显示与该节点连接的节点
- [ ] 锚点禁用状态及相关交互
- [ ] 节点锁定及加锁状态
未来规划
🤔 边有相交时, 能否使用弧线跳过
🤔 如何将多个事件注册为插件
🤔 ps 旋转和拖拽变形
🤔 对齐线如何实现
🤔 富文本功能栏
如何开发
npm install
npm run dev
# open 127.0.0.1:4300 in your browser注意事项
- 使用
cnpm安装可能导致import路径报错, 建议使用npm或yarn。 - 另外发现使用
npm安装内部依赖会自动更新, 导致G6内部出现报错, 如有报错, 请自行排查依赖版本. 请务必使用package-lock或yarn.lock锁定依赖版本 - 有问题请在 GitHub 上提 issue, 目前版本还有大部分功能要完善, 欢迎 star
开源不易, 请多多鼓励
开源3年, 生活不易, 希望同行多多鼓励
重要更新日志
https://github.com/keman5/welabx-g6/blob/master/CHANGELOG.md
[0.8.0] 2023-02-21
- [upgrade] 拖拽添加连线支持画布缩放了, 设置 window.$welabxG6 = graph; 自动生效, 默认缩放为1, 如果实例化后缩放不是1, 必须设置此全局变量, 建议实例化后直接设置, 后续迭代可能会用到该变量
const graph = new G6.Graph({});
graph.read(data); // 读取数据
// !!! 添加全局变量, 内部会自动读取该对象进行缩放
window.$welabxG6 = graph;[0.7.0] 2022-03-21
- [add] 添加 umd 打包格式, 可通过 script 引入
- [fix] 鼠标拖拽到画布外时连线会断开, 但需要做些额外处理:
this.graph.on('canvas:mouseleave', e => {
this.graph.getNodes().forEach(x => {
const group = x.getContainer();
group.clearAnchor();
x.clearStates('anchorActived');
});
});[0.6.5] 2021-07-12
- [add] 为 drag-shadow-node 添加 shouldBegin 方法, 可在使用时进行自定义
- [add] 边和节点均支持二次扩展并通过 stateApplying 扩展更多状态
[0.6.0] 2021-04-25 !重大更新
- [upgrade] 升级 G6 到 4.2.x 版本, 0.6.0 版本以后请使用 antv/G6 v4.2.0+ 作为生产版本
- [fixed] 修复了拖拽节点后, 边未自动更新, 需要更新 modes 参数 drag-node 为 drag-shadow-node, 当使用 drag-node 时, 拖拽节点行为将使用官方内置行为, 如果需要使用虚拟节点拖拽效果, 请准备两种 modes, 使用 setMode 切换 drag-node 和 drag-shadow-node !!!