G6 4.3.0 静水深流

原创
05/18 12:00
阅读数 306

banner.png

话不多说,本次发布主要看图。「官网传送门」 ​

⭐️ 新特性

FA2 布局 —— 又回来了!

DEMO」,「DOCS

G6 2.0 曾经拥有过的 Force Atlas 2 又回来了! 相较于经典力导向布局,Force Atlas 2 结构更清晰,分支更延伸。 image.png

图例插件 —— 元素类型更明确!

DEMO」,「DOCS

标识和说明图上不同类型的节点/边。并可通过与图例的交互,对主图元素进行高亮和过滤。

legend.gif

对齐线 —— 节点就是要整整齐齐!

DEMO」,「DOCS

当我们想让一批节点在一条直线上对齐时,人肉像素级拖动对齐是件非常困难的事情。G6 4.3.0 版本中,我们增加了对齐线组件,可以辅助我们让节点快速对齐。

snap-line.gif

流水线子图布局 —— 子图布局更高效!

DEMO」,「DOCS」,特别鸣谢社区贡献者 GitHub @ColinChen2

可在图上为不同部分快速配置不同布局。

image.png

甜甜圈节点 —— 让节点详情更直观!

DEMO」,「DOCS

节点详情中的统计信息一目了然!

image.png

触控滚动画布 —— 交互更顺畅!

DOCS

使用触摸板,也能滚动画布,让交互体验更加顺畅!

scroll-canvas.gif

🛠 体验优化

下载图片带水印 —— 版权保护!

特别鸣谢社区贡献者 GitHub @xiaohu12685

不仅可以在绘制时自定义水印,下载为图片时也能带水印咯!保护您的创作版权。

image.png

提示框优化 —— 优雅交互!

相对于元素固定位置」「点击出现提示框

旧版的提示框跟随鼠标在节点内部移动(左),新版本支持配置相对于节点/边位置固定(右): ​

tooltip-unfixpos.gif

 

旧版的提示框只能响应鼠标的移入与移出元素(左),新版本支持配置响应动作为点击元素(右):

tooltip-mouseenter.gif

节点支持 iconfont 图标 —— 成本降低!

旧版中一些内置节点只能支持 base64 或图片链接作为节点的 icon。现在,它们支持 iconfont 了!不用请求网络图片资源超方便。

更多便捷 API —— 代码更少!

  • getViewPortCenterPoint 用于获得视口中点的画布坐标值;
  • getGraphCenterPoint 用于获得图内容中点的画布坐标值。

📱移动版 G6Mobile

支持小程序和h5的移动端图可视化引擎 ​

特性

支持支付宝小程序和微信小程序

支付宝demo传送门」「微信demo传送门

通过[支付宝小程序组件](https://github.com/openwayne/g6-component-alipay) 或者 [微信小程序组件](https://github.com/openwayne/g6-component-wx),在小程序里,仅需简单改动,即可在使用。小程序内优先使用 Native Canvas 渲染,相比小程序内嵌 Web Canvas,在性能上会有一定提升。 ​

  • 支付宝小程序演示

SVID_20210411_154706_1.gif

  • 微信微信小程序演示

SVID_20210411_154210_1.gif

🎁 Demo 大奉送

节点内容无限滚动

传送门

通过 G6 自定义节点,可以实现很多复杂的节点,比如无限滚动、加载更多的列表等节点,还可针对节点中每个子项单独设置锚点,这类节点常用于 ER 图建模中。

node-scroll.gif

桑基图

传送门

桑基图 Demo 又回来了!分析流量一把手。

image.png

可编辑思维导图

传送门

思维导图帮你快速记录每一个灵感的火花!

mindmap.gif

合并同类兄弟节点

传送门

树图太长?合并同类项!

slibing-combine.gif

从锚点创建边

传送门

create-edge-linkpoint.gif

算法 Demo 来袭

gaddi.gif

image.png

image.png

predict.gif

致谢

感谢一直支持、使用并关注 G6 的伙伴们,特别感谢参与 G6 共建的社区同学。目前 G6 仍有许多不足,但是我们相信通过持续的迭代,以及越来越多热爱图可视分析方向同学的共同努力,我们会变得越来越好。欢迎关注和 star 我们的 Github:

 

image.png

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部