作者 | 問崖
X6 是螞蟻金服 AntV 旗下的圖編輯引擎，X 象形圖編輯場景的關系連結，同時 X6 又是 G6 的孿生兄弟，是以沿用了 G6 中的 6，深究一下，6 源于《六度分隔理論》，表達了我們對關系資料、關系網絡的敬畏和着迷。
更好的閱讀體驗請點選閱讀原文至語雀文檔。
圖編輯也是圖領域一個重要方向，許多流程圖、關系圖繪制場景都需要它。基于螞蟻内部的機器學習算法模組化平台多年的可視編排能力打磨，我們決定把其中的圖編輯核心抽取出來，圖編輯 X6。
提煉後經過近一年的内部業務打磨，我們完善了圖編輯場景的常用擴充，如小地圖、網格系統、對齊線、框選、撤銷/重做等，内置了圖編輯場景的正常互動和設計，如群組、連結樁、節點縮放、旋轉、連線互動，并提供了基于 HTML 和 React 低成本定制節點能力。今天我們很高興能為可視化開源社群帶來 X6 1.0 正式版本，請多關照！
歡迎給我們 GitHub 倉庫（
https://github.com/antvis/x6）加星 🔥🔥🔥
快速上手
隻需要掌握建立畫布、添加節點/邊、更新節點/邊、删除節點/邊這幾個 API 即可開始使用 X6，并且我們将 X6 所有特性提取到畫布的配置項中，一共包含 50 多個配置選項，基于這些配置項我們可以快速定制出自己的畫布。詳情請參考
教程。
節點、連線與畫布，圖編輯核心能力
易定制的節點
X6 預置了一些常用節點樣式，建立節點時通過
shape
來指定使用哪種圖形來渲染節點即可，而且絕大部分節點樣式和互動都可被自定義。
基礎圖形
我們可以基于
path
、
polygon
和
polyline
三個基礎圖形擴充出更多圖形。然而，實際業務場景中的節點可能要更複雜，預置樣式不滿足需求？沒關系，我們還提供了兩種靈活的自定義節點的方式。支援使用 HTML 渲染節點，使用時将
shape
指定為
html
即可；另外還可以使用 React 元件來渲染節點，使用時需要安裝并引入x6-react-shape，配合咱家 antd 更是天生一對哦。
使用 HTML 和 React 渲染節點
豐富的連線和箭頭
内置了豐富的箭頭和連線樣式，分别可以參考箭頭使用教程、路由使用教程和連接配接器使用
教程。其中路由将邊的路徑點做進一步處理，并在必要時添加額外的點，并傳回處理後的點。然後連接配接器将邊的起點、路由處理後的路徑點、終點連接配接成一條完整的連線。同時我們也提供了對應的擴充能力，詳情參考自定義箭頭教程、自定義路由教程和自定義連接配接器教程。
網格和背景
網格是節點在畫布中定位時最小像素單元，例如當節點的位置是
{x: 12, y: 18}
網格大小為
5
時，那麼節點渲染到畫布的實際位置将是
{x:10, y: 20}
。X6 預設提供了
dot
，
fixeDdot
mesh
doubleMesh
四種風格的網格，并且支援自定義網格大小和顔色。更多詳情請參考網格使用教程。另外，如果内置網格樣式不滿足業務需求，我們還提供了定義和使用自定義網格的機制。
靈活易用的網格系統
同時可以為畫布指定背景顔色和背景圖檔，例如我們可以指定畫布背景顔色為 #fcfcfc，同時将 AntV 的 Logo 作為畫布的背景圖檔，設定背景圖檔的透明度為 0.2，并以水印的方式重複顯示。更多背景相關設定請參考背景使用教程，另外我們也提供了自定義背景圖檔顯示方式的接口。
背景顔色和背景圖檔
互動能力與配套元件，圖編輯不可或缺
連結樁
連結樁是節點上的固定連接配接點，很多圖應用都有連結樁，并且有些應用還将連結樁分為輸傳入連結接樁和輸出連接配接樁。建立節點時我們可以通過
ports
選項來配置連結樁。可以指定連結樁的位置，如連結樁位于節點頂部和底部，同時也可以為連結樁指定标簽。更多詳情請參考連結樁使用教程和連結樁布局選項。
輸入和輸對外連結接樁
沿橢圓均勻布局的連結樁
動态添加/删除連結樁
連結樁高亮和自動吸附
群組
我們可以通過父子嵌套來實作群組，支援通過互動拖拽成組，支援限制群組内的子節點的移動範圍或自動擴充/收縮父節點的大小，另外也可以通過節點中的展開/折疊按鈕來展開/折疊群組，更多詳情請參考群組使用教程。
拖拽嵌套
限制子節點移動
自動擴充父節點
展開/折疊
點選/框選
點選節點/邊時選中節點，按下 Cmd/Ctrl 連續點選可以同時選中多個節點，開啟
rubberband
選項後支援框選能力。更多詳情請參考點選/選框使用教程。
點選
框選
撤銷/重做
撤銷/重做是圖編輯場景的常用能力，在 X6 中可以通過
history
配置項來開啟撤銷/重做能力，更多詳情請參考撤銷/重做使用教程。
對齊線
對齊線是移動節點排版的輔助工具，預設禁用，可以通過
snapline
配置項開啟和定制對齊線的樣式。更多詳情請參考對齊線使用教程。
小地圖
小地圖是完整畫布的預覽，可以通過平移縮放小地圖的視口來平移縮放畫布，支援渲染粒度定制和樣式定制，即是否在小地圖中渲染節點/邊，節點的細節粒度等，例如下面案例中使用色塊來代替了每個節點。更多詳情請參考小地圖使用教程。
還有更多配套的互動元件，如剪切闆、拖拽、鍵盤快捷鍵、滑鼠滾輪縮放畫布等，請點選對應的連結檢視。
UI 元件
搭建一個複雜的圖編輯應用還需要用到 Menubar、Toolbar、Dropdown、ContextMenu、Splitbox 等 UI 元件，我們在 x6-react-components 中提供了一些這樣的 React 元件，可以搭配 antd 使用。點選下面連結檢視每個元件的使用文檔。
- Menu 菜單
- Dropdown 下拉菜單
- ContextMenu 右鍵菜單
- Menubar 菜單欄
- Toolbar 工具欄
- ColorPicker 顔色選擇器
- SplitBox 包含分割條的容器
- ScrollBox 自定義滾動條的容器
AutoScrollBox 自動根據内容大小設定和更新滾動條的容器
菜單欄
工具欄
顔色選擇器
分隔條
自由靈活的擴充能力
X6 設計之初就充分考慮了可擴充性，精心設計了簡單、高可拓展的接口。屬性、連接配接樁布局、連接配接樁标簽布局、節點錨點、邊的錨點、連接配接器、路由、箭頭、網格、背景、工具等都可以通過注冊機制靈活擴充。有了這些擴充能力，發揮你的想象力，在 X6 這顆種子上生出無限的可能。下面是用 X6 實作的桑基圖：
福利來了，三個應用場景 DEMO
上面分享了那麼多特性，那如何快速将 X6 應用到自己場景中呢？最快的方式莫過于“拿來主義”，是以我們在配套源碼中提供了流程圖編排、DAG 圖編排和 ER 圖渲染三個應用場景 DEMO，我們可以從這三個 DEMO 開始定制自己的應用。更多場景的應用我們正在籌備中，同時也歡迎大家給我們貢獻場景案例。
流程圖，流程編排場景。
有向無環圖（DAG 圖），算法模組化場景。
ER 圖，ER 模組化場景。
最後
非常感謝你的耐心閱讀，X6 還是個新生兒，雖然内測版早已在内部資料研發(ER圖)、運維中台(流程圖)等多個産品應用上線，但相信還有很多問題有待完善，歡迎在 GitHub 給我們回報問題。
附
AntV 2020 品牌日的釋出詳情
- 利業·立業 - AntV 與業務的故事： https://www.yuque.com/antv/blog/2020story
- 技術專文
- G2Plot 2.0 全新來襲 https://www.yuque.com/antv/blog/2020g2
- F2Native 1.0 新的起點 https://www.yuque.com/antv/blog/2020f2
- G6 棧：圖可視分析如此簡單 https://www.yuque.com/antv/blog/2020g6
- X6 1.0 抱歉來晚 https://www.yuque.com/antv/blog/2020x6
- L7 2.3 業務為本完善生态 https://www.yuque.com/antv/blog/2020l7
- AVA 1.0 你的圖表參謀 https://www.yuque.com/antv/blog/2020ava
- 設計專文
- 2020，貼地飛行的 AntV 設計： https://www.yuque.com/antv/blog/2020design
- 解決方案專文
- AntV 圖可視分析解決方案，來啦： https://www.yuque.com/antv/g6/solution
AntV 項目連結
歡迎關注我們的 GitHub 項目，點亮 star 了解我們的實時動态，期待 PR：
AntV 官網：
https://antv.vision/G2：
https://github.com/antvis/g2G2 是一套基于可視化編碼的圖形文法，以資料驅動，具有高度的易用性和擴充性，使用者無需關注各種繁瑣的實作細節，一條語句即可建構出各種各樣的可互動的統計圖表。
G2Plot：
https://github.com/antvis/g2plotG2Plot 的定位是開箱即用、易于配置、具有良好視覺和互動體驗的通用圖表庫。
F2：
https://github.com/antvis/f2F2 是一個專注于移動，開箱即用的可視化解決方案，完美支援 H5 環境同時相容多種環境（node, 小程式，weex）。完備的圖形文法理論，滿足各種可視化需求。專業的移動設計指引為你帶來最佳的移動端圖表體驗。
F2Native：
https://github.com/antvis/F2NativeF2Native 是一個專注于用戶端，開箱即用、高性能的可視化解決方案，完備的圖形文法理論，滿足你的各種需求，專業的移動設計指引為你帶來最佳的移動端圖表體驗。
G6：
https://github.com/antvis/g6G6 是 AntV 旗下的圖可視化與圖分析引擎，G 來自于 Graphic、Graph ，意味着我們要基于圖分析技術做圖可視化；6 來自于《六度分隔理論》，表達了我們對關系資料、關系網絡的敬畏和着迷。
Graphin：
https://github.com/antvis/graphinGraphin 是一個基于 G6 封裝的關系可視分析工具 ，簡單，高效，開箱即用，取自 Graph Insight，圖的分析洞察。
X6：
https://github.com/antvis/X6X6 是 AntV 旗下的圖編輯引擎，提供了一系列開箱即用的互動元件和簡單易用的節點定制能力，友善我們快速搭建 DAG 圖、ER 圖、流程圖等應用。
L7：
https://github.com/antvis/l7L7 是一個基于 WebGL 的開源大規模地理空間資料可視分析開發架構。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能為全球位置資料提供可視分析的能力。
AVA：
https://github.com/antvis/AVAAVA 是為了更簡便的可視分析而生的智能可視化架構。
G：
https://github.com/antvis/gG 是 AntV 幾個産品共同的底層 2D 渲染引擎，高效易用，專注于圖形的渲染、拾取、事件以及動畫機制，給上層 G2、F2、G6 提供統一的渲染機制。
ChartCube：
https://chartcube.alipay.comChartCube 是一個可以快速完成圖表制作的線上工具，隻需要三步就可以建立出高品質的圖表。
關注「Alibaba F2E」
把握阿裡巴巴前端新動向