G6 3.4 又双叒叕来啦 ​​​​​​​

栏目: 软件资讯 · 发布时间: 4年前

内容简介:AntV G6 是一款开源的图可视化引擎,专注于图可视化及图分析。 欢迎关注和 Star 我们的 GitHub:https://github.com/antvis/G6 官网:https://g6.antv.vision/zh/ 上个月,性能强悍的 TS 版 G6 3.3 刚刚与大家见面...

G6 3.4 又双叒叕来啦 ​​​​​​​

AntV G6 是一款开源的图可视化引擎,专注于图可视化及图分析。 欢迎关注和 Star 我们的 GitHub:https://github.com/antvis/G6 官网:https://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 愉快地玩耍啦。来,一睹为快!G6 3.4 又双叒叕来啦 ​​​​​​​

// 自定义节点,使用 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 等状态,当有多种状态时候,我们往往会像下面这样操作????:G6 3.4 又双叒叕来啦 ​​​​​​​

默认情况下,状态只会与节点/边的 keyShape 相关联。然而,很多时候,我们希望能够同时更新节点/边上的其他图形。这时候,需要这样操作????:G6 3.4 又双叒叕来啦 ​​​​​​​

当然了,如果仅仅是上面这种问题,我都能忍。G6 3.4 又双叒叕来啦 ​​​​​​​

但是,G6 之前的版本竟然还不支持多值状态、互斥状态。举个????:一个节点代表一个人,有“健康”、“疑似”、“确诊”、“死亡”四种状态。这四个状态是相互独立的,某个节点上不可能同时存在其中的任何两种状态。但在之前的版本中,由于状态是二值的,如下设置方法会让四种状态同时存在:G6 3.4 又双叒叕来啦 ​​​​​​​G6 3.4 又双叒叕来啦 ​​​​​​​

Let's Move on!

上面这些令人头秃的需求你是不是也经常遇到呢?如果有,G6 3.4 你值得拥有!G6 3.4 支持:

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

G6 3.4 又双叒叕来啦 ​​​​​​​

状态相关详情请看:G6 状态管理的最佳实践

G6 3.4 又双叒叕来啦 ​​​​​​​

预告

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


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

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

G6 3.4 又双叒叕来啦 ​​​​​​​

新成员

AntV 又添加新成员了,专注于图编辑的 X6 正式亮相,详见图编辑引擎 X6 让你们久等了,欢迎试用,欢迎 star

 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Python神经网络编程

Python神经网络编程

[英]塔里克·拉希德(Tariq Rashid) / 林赐 / 人民邮电出版社 / 2018-4 / 69.00元

神经网络是一种模拟人脑的神经网络,以期能够实现类人工智能的机器学习 技术。 本书揭示神经网络背后的概念,并介绍如何通过Python实现神经网络。全书 分为3章和两个附录。第1章介绍了神经网络中所用到的数学思想。第2章介绍使 用Python实现神经网络,识别手写数字,并测试神经网络的性能。第3章带领读 者进一步了解简单的神经网络,观察已受训练的神经网络内部,尝试进一步改......一起来看看 《Python神经网络编程》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

MD5 加密
MD5 加密

MD5 加密工具