Need help with welabx-g6?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

claudewowo
153 Stars 35 Forks 66 Commits 1 Opened issues

Description

welabx - antv G6

Services available

!
?

Need anything else?

Contributors list

No Data

g6 流程图

项目背景

起源

公司项目中需要用到涉及表示关系的图谱, 所以在d3可以满足需求的情况下, 突然发现了G6, 在对比了性能和技术后续迭代, 我选择了G6作为技术支撑, 进而迈入可视化领域.

面向人群

适用于需要靠绘图来表达和描述关系的项目中, 官网所有支持的布局均可使用, 以及相关的开发者.

计划

在1.0时完整实现所有流程化的自定义功能, 并包含绝大部分可选的交互, 实现极高性能的绘图工具.

截图, 显示不了就点👇gayhub 案例链接吧

在线案例

流程案例

视频教程

欢迎关注我的 B 站教程, 不定时更新, 讲解各种图形绘制以及问题解决思路, 带你领略可视化的魅力: b站教程

G6 五十问

五十个问题及解答

已完成功能

  • 自定义节点和边, 支持锚点配置
  • 自定义圆形, 方形, 椭圆, 菱形节点
  • 节点支持拖拽连线, 删除(按delete键), 编辑
  • 边默认带结束箭头, 支持标签显示
  • 支持自定义 tool-tip 内容
  • 支持画布/节点/边事件监听

TODO

  • [] 节点多选(shift), 拖动框选节点
  • [] 拖拽节点到画布边缘时自动滚动画布可见范围
  • [] 高亮显示与该节点连接的节点
  • [] 锚点禁用状态及相关交互
  • [] 节点锁定及加锁状态

  • [x] 给节点设置图标

  • [x] 边偶尔会被选中

  • [x] 边动态动画

  • [x] 拖拽边高亮及时消失

  • [x] 节点和边 tooltip

  • [x] 椭圆, 平行四边形节点

  • [x] 边支持编辑箭头

  • [x] 双击节点编辑标签

  • [x] 画布缩放时的拖拽兼容

  • [x] 解决拖拽时 null文字残留

  • [x] 点击节点时将节点层级提升

  • [x] 拖拽画布后拖拽锚点虚线位置错误

深度思考

  • 边有相交时, 能否使用弧线跳过
  • 如何将多个事件注册为插件
  • ps 旋转和拖拽变形
  • 对齐线如何实现
  • 富文本功能栏

使用教程

使用教程

运行案例

npm install
npm run dev
// open 127.0.0.1:4300 in your browser

注意事项

notes: 使用 cnpm 安装可能导致 import 路径报错, 建议使用npm或yarn, 另外发现使用 npm 安装内部依赖会自动更新, 导致G6内部出现报错, 如有报错, 请自行排查依赖版本. 请务必使用 package-lock 或 yarn.lock 锁定依赖版本!!! 有问题请在GitHub上提issue, 目前版本还有大部分功能要完善, 欢迎star

重要更新*

更新日志

[0.5] 2020-11-27 !重大更新

  • [upgrade] 升级 G6 到 4.x 版本
  • [upgrade] 重大更新! 实例化方法已经独立成注册方法, 只需极少的改动, 具体写法请参照使用教程!
  • [add] 支持引用 G6 内置箭头了!

[0.5.2] 2021-01-13

  • [upgrade] 升级 G6 到 4.1.x 版本
  • [upgrade] 提供的 *-node 节点均支持二次继承, 支持更多扩展可能性! 二次继承可参考使用教程

[0.5.4] 2021-02-07

  • [fixed] 所有 labelCfg 样式配置调整为 labelCfg.style, 同官方 API

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.