「螞蟻金服 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。