「蚂蚁金服 AntV」G6 3.4 又双叒叕来啦

AntV G6 是一款开源的图可视化引擎，专一于图可视化及图分析。

欢迎关注和 Star 咱们的 GitHub：github.com/antvis/G6

官网：g6.antv.vision/zh/

上个月，性能强悍的 TS 版 G6 3.3 刚刚与你们见面。为解决长期以来的用户痛点，咱们冒着秃头的风险，光速迭代开发。仅时隔一个月，G6 3.4 又来啦。别怕，我发誓，彻底兼容 v3.3！没有最好，只有更好！

SVG is Coming back!

为强化性能， G6 3.3 进行了底层渲染引擎的全面升级，但暂时仅支持了 Canvas 版本。很多老用户抱怨，可爱的 SVG 版本上哪儿去了？此次，G6 3.4 从新支持了 SVG。交互、动画、布局，通通不成问题。不只可使用 circle、rect、path 等基础图形，自定义节点/边还支持使用 DOM 元素！小伙伴们又能够和 SVG 愉快地玩耍啦。来，一睹为快！

// 自定义节点，使用 DOM
G6.registerNode('dom-node', {
  draw: (cfg, group) => {
    return group.addShape('dom', {
      attrs: {
        width: cfg.size[0],
        height: cfg.size[1],
        html:
          `<div style="background-color: #fff; border: 2px solid #5B8FF9; border-radius: 5px; width: ${cfg.size[0]-5}px; height: ${cfg.size[1]-5}px; display: flex;"> <div style="height: 100%; width: 33%; background-color: #CDDDFD"> <img style="line-height: 100%; padding-top: 6px; padding-left: 8px;" src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ" width="20" height="20" /> </div> <span style="margin:auto; padding:auto; color: #5B8FF9">${cfg.label}</span> </div>`
      }
    });
  }
}, 'single-node');
复制代码

状态管理新篇章

G6 中，节点/边的状态（State）用于反馈用户交互和数据变化。经过状态，能够将「交互/数据变化」与视图中「元素的样式变化」快速关联。

举个🌰：鼠标进入节点，该节点为 hover 状态，并被高亮；离开节点，该节点为非 hover 状态，并复原样式。

使人头秃的过往

在具体的业务开发中，咱们须要的不只仅是简单的 hover、select 等状态，当有多种状态时候，咱们的代码每每会像下面这样👇：

默认状况下，状态只会与节点/边的 keyShape 相关联。然而，不少时候，咱们但愿可以同时更新节点/边上的其余图形。这时候，须要这样操做👇：

固然了，若是仅仅是上面这种问题，我都能忍。

可是，G6 以前的版本居然还不支持多值状态、互斥状态。举个🌰：一个节点表明一我的，有“健康”、“疑似”、“确诊”、“死亡”四种状态。这四个状态是相互独立的，某个节点上不可能同时存在其中的任何两种状态。但在以前的版本中，因为状态是二值的，以下设置方法会让四种状态同时存在：

Let's Move on!

上面这些使人头秃的需求你是否是也常常遇到呢？若是有，G6 3.4 你值得拥有！G6 3.4 支持：

• 快速设置目标状态：当一个节点/边上已被设置了大量不一样状态后，要再设置一个新状态时，能够快速将以前全部状态清除；
• **多值：**即一个状态量存在多个不一样的值，如节点表明人，有“健康”、“疑似”、“确诊”、“死亡”四种状态；
• 互斥：如 “健康”、“疑似”、“确诊”、“死亡”四种状态中，“死亡”与其余三种就是互斥的，不可能同时存在“健康”和“死亡”两种状态；
• 节点/边中全部子图形的样式更新：如一个由文本和圆组成的节点，状态变化时不只能设置圆的样式，也能够设置文本的样式；
• 更新状态样式：当更新节点的样式时，可以同时更新状态的样式。

状态相关详情请看：G6 状态管理的正确姿式。

预告

告诉你一个小秘密，G6 3.5 将从新设计节点分组机制，敬请期待！

再告诉你一个大秘密…… Star G6 的 GitHub，你就有 100% 机会赢得……………………一个开源的、免费的、优秀的图可视化引擎！

AntV G6 是一款开源的图可视化引擎，专一于图可视化及图分析。

欢迎关注和 Star 咱们的 GitHub：github.com/antvis/G6

官网：g6.antv.vision/zh/

---

新成员

AntV 又添加新成员了，专一于图编辑的 X6 正式亮相，详见图编辑引擎 X6 让大家久等了，欢迎试用，欢迎 star。