发布稿 - 3.8.jpg

AntV G6 每月一次的发布如约而至。今天，我们发布了 3.8.0 版本。有什么新鲜黑科技？G6 交互式文档 GraphMaker 和可播放的 TimeBar 绝对是最大看点。此外，我们还有边滤镜、可配置的 FishEye、更强大的 JSX 节点定义方案、性能优化及功能完善。每一个或大或小的更新，我们用心为您准备。关注 AntV G6 以免错过任何好玩的特性哦。

G6 交互式文档 GraphMaker

只想知道怎么用，并不想看文档？配置项那么多，找不到想要的哪一个？用户痛点就是我们的痛点，用户的困扰就是我们的困扰。这次，我们推出交互式文档 GraphMaker，可以让你不用看文档，也知道怎么配置。
image.png
是不是有点心动，点击 GraphMarker 进行体验。

边滤镜 —— 让探索更专注

请点击这里进行体验。

当图中存在大量的边时，边之间的相互遮挡与交叉使得我们想看清楚一些关注边变得异常艰难。为解决这类问题，G6 提供了边滤镜插件。 边滤镜插件的用法一如既往的简单，实例化时配置过滤函数或内置过滤选项即可。

  1. const filterLens = new G6.EdgeFilterLens({
  2.   // 移动滤镜的方式
  3.   trigger: 'drag',
  4.   // 是否在滤镜中显示边的文本
  5.   showLabel: 'edge',
  6.   // 使用内置过滤选项。'one'：滤镜只包含一个端点的边；'both'：滤镜包含两端的边；'only-source'：滤镜仅包含起点的边；'only-target'：滤镜仅包含终点的边。
  7.   type?: 'both';
  8.   // 自定义过滤函数：显示数据中 size 属性值大于 3 的边
  9.   shouldShow: d => {
  10.     if (d.size > 3) return true;
  11.     return false;
  12.   },
  13. });

隐藏.gif

可播放的多种 TimeBar

请点击这里进行体验。

预览版 该 TimeBar 组件为预览版本，配置项和 API 可能会有变动。如果在生成环境使用请谨慎考虑，我们会在下个版本提供稳定的版本。

我们共提供三种形式的 TimeBar 插件：

  • 趋势图时间轴
  • 简易版时间轴
  • 刻度时间轴

支持范围/单一时间点播放、快进、后退、调节速度等功能，其中趋势图时间轴和简易版时间轴支持单一时间和时间范围切换相互切换。

趋势图时间轴

image.png

单一的折线图或面积图难以满足需求？可以考虑使用混合图表，我们目前支持柱状图、折线图及面积图，赞不支持多折线的情况。
image.png

简易时间轴

如果嫌趋势图时间轴太复杂， 可以选择简易版的时间轴组件，在功能上面，简易时间轴一个也不会少。
image.png

刻度时间轴

刻度类型的时间轴专为展示离散形式的时间数据。刻度时间轴上每个小方块代表一个刻度值。单击可以选择到具体刻度；在时间轴上拖动可以框选刻度范围。
image.png

FishEye 配置更自由

请点击这里进行体验。

在上个版本中，我们推出了 FishEye —— 为 focus + context 的探索场设计的插件，能够保证在放大关注区域的同时，上下文及上下文与关注中心的关系不丢失。这一次，我们让 FishEye 更好用了！我们为 FishEye 增加了更多配置，可以让用户在使用 FishEye 的过程中，动态改变 FishEye 覆盖范围以及放大程度。真正做到让用户随心所欲地探索。
隐藏.gif

更强大的节点定义方案

请点击这里进行体验。

在上个版本中，为降低用户自定义节点的上手成本，我们提供了使用类 JSX 的语法来定义节点。在方便的同时，也增加了很多限制，灵活性大大降低。我们收集了用户的意见，进行了一番升级。降低上手成本的同时，还保持一定的灵活性和扩展性。现在，类 JSX 预发自定义节点支持了以下配置：

  • 重点更新 支持定义 afterDraw、setState 等方法；
  • style 中新增 next 属性，值为 'inline' 时，下一个元素会自动在布局到上一个元素的右侧。
    1. G6.registerNode('jsx-node', {
    2.   jsx: cfg => `<group>
    3.       <rect style={{
    4.     marginLeft: 10,
    5.     marginTop: 3,
    6.     width: ${cfg.width},
    7.     height: ${cfg.height},
    8.     fill: '#fff',
    9.     stroke: '#1890ff'
    10.   }} name="body" >
    11.     <rect style={{
    12.       marginLeft: 10,
    13.       width: ${cfg.width / 100 * cfg.used},
    14.       height: ${cfg.height},
    15.       fill: '#1890ff',
    16.       stroke: '#1890ff'
    17.     }}/>
    18.   </rect>
    19. </group>`,
    20. setState(name: string, value: string | boolean, item: Item) {},
    21. afterDraw(cfg: NodeConfig) {}
    22. })

性能 & 功能优化两不误

大数据量下进行交互的性能问题一直困扰着 G6 及 G6 的用户。继上一个版本支持画布拖动过程中隐藏非关键图形外，在这个版本中，我们增加了在缩放图的过程中也自动隐藏非关键图形。这一个看似很小的优化却能够大幅提升缩放画布时的性能及用户的交互体验。

此外，当图中有大量 Combo 时，也会出现一定的性能问题，本次更新我们也优化了 Combo 的性能。

在增加新的功能特性及优化性能的基础上，打磨已有功能及修复 BUG 也从未停止。从 3.7.0 到 3.8.0，我们优化了 polyline 的算法，修复易用性问题及功能缺陷共 20+ 个，更多详细的内容可以参考 G6 ChangeLog。

结语

在 G6 3.8.0 中，我们主要从易用性、分析能力、性能三大方面做了增强及优化。为了让用户更快更好地学习和上手，我们发布了 G6 交互式文档 GraphMaker；为了让探索复杂的关系数据更加简单，增加了边滤镜插件，我们增强了已有的 FishEye 插件；为了打好探索时序数据的基石，我们提供了三种不同类型的时间轴；为了在低成本定义节点的同时还能保持灵活性及扩展性，我们优化了使用 JSX 定义节点的方案……

在图可视化与图分析的道路上，G6 步履不停。我们非常需要你的支持和反馈，也非常感谢你的关注。

AntV G6 是一款开源的图可视化引擎，专注于图可视化及图分析领域。 欢迎关注和 star 我们的 GitHub：https://github.com/antvis/G6 官网：https://g6.antv.vision/zh/

g6-gallery.png