antv-x6是一個功能強大、可擴展性高的可視化工具，提供了一系列開箱即用的交互軟體和簡單易用的節點定製能力，能夠幫助使用者便捷地創建流程圖、ER圖等交互性較強的應用。本次分享介紹了x6的基本功能，更多高級功能有待我們進一步學習和探索。 ...
1 簡介
AntV是一個數據可視化（https://so.csdn.net/so/search?q=數據可視化&spm=1001.2101.3001.7020 ）的工具（https://antv.vision/zh/ ），可以方便的創建圖表或者其他圖形，讓我們的頁面開發比較輕鬆的讓數據可視化。進入網站後，我們可以看到七個模塊：
G2：數據驅動，高度易用，可擴展的可視化圖形語法
S2：開箱即用的多維可視分析表格
G6：便捷的關係數據可視化引擎與圖分析工具
X6：極易定製、開箱即用、數據驅動的圖編輯引擎
L7：高性能、高渲染質量的地理空間數據可視化框架
F2：專註於移動端的可視化解決方案，相容 H5/小程式/Weex 等多端環境
AVA：AVA 是為了更簡便的可視分析而生的技術框架
2 安裝
通過npm或yarn 命令安裝x6
# npm
$npm install @anv/x6 --save
# yarn
$yarn add @antv/x6
安裝完成之後，使用import或require進行引用。
import { Graph } from 'antv/x6'
3 基礎概念
3.1 畫布Graph
在x6中，Graph是圖的載體，它包含圖上的所有元素（節點、邊等），同時掛載了圖的相關操作（如交互監聽、元素操作等）。
const graph = new Graph({
panning:true //支持平移
selecting: {
enabled: true, //支持選中
multiple: true,
movable: true, //支持拖動
}
}
graph.zoom(0.2) //在原來縮放級別上增加0.2
graph.zoom(-0.2) //在原來縮放級別上減少0.2
3.2 基類Cell
基類Cell定義了節點和邊共同屬性和方法，如屬性樣式、可見性、業務數據。
cell有一些基礎選項：
3.3 節點Node
node是所有節點的基類，繼承自Cell，並定義了節點的通用屬性和方法。
- size:定義節點大小，是一個包含width和height屬性的對象，可以通過size()方法來獲取和設置節點大小。
- position:節點位置，是一個包含x和y屬性的對象。
- angle:節點的旋轉角度，旋轉中心為節點的中心。
3.4 邊Edge
- source: 源對象。
- target: 目標對象。source 和 target 都可以是任何元素，區別是，source 是起點，target 是終點。 例如，con-nector 中的箭頭總是從 source 指向 target。
- connector: 連接線。
- vertices:路徑點，是一個數組。邊從起點開始，按順序經過路徑點，最後到達終點。
4 使用
4.1 創建節點
1.使用構造函數。 X6 的 Shape 命名空間中內置了一些基礎節點，如 Rect、Circle、Ellipse 等，可以使用這些節點的構造函數來創建節點。
import { Shape } from '@antv/x6'
// 創建節點
const rect = new Shape.Rect({
x: 100,
y: 200,
width: 80,
height: 40,
angle: 15,
attrs: {
body: {
fill: '#2ECC71', // 背景顏色
stroke: '#000', // 邊框顏色
},
label: {
text: 'coldchain', // 文本
fill: '#333', // 文字顏色
fontSize: 13, // 文字大小
},
},
})
// 添加到畫布
graph.addNode(rect)
2.使用VUE節點
Graph.registerNode("my-count", { //將vue組件註冊到系統中
inherit: "vue-shape", //指定節點類型為vue-shape
x: 200,
y: 150,
width: 150,
height: 100,
component: {
template: `<Count />`,
components: {
Count,
},
},
});
graph.addNode({
id: "1",
shape: "my-count", //將節點的 shape 屬性指定為註冊的節點名稱
x: 400,
y: 150,
width: 150,
height: 100,
data: {
num: 0,
},
});
這樣，我們就可以自定義節點，大大增加了節點的可擴展性。
4.2 節點連線
const rect1 = graph.addNode({
x: 30,
y: 30,
width: 100,
height: 60,
label: 'hello',
id:'coldChain01',
ports: [ //設置連接樁
{ id: 'port1' },
{ id: 'port2' },
],
})
const rect2 = graph.addNode({
x: 400,
y: 240,
width: 100,
height: 60,
label: 'world',
id:'coldChain02',
ports: [
{ id: 'port3' },
{ id: 'port4' },
],
})
graph.addEdge({
source: {cell:'coldChain01',port:'port1'}, //起點id和連接樁id
target: {cell:'coldChain02',port:'port3'}, //終點id和連接樁id
vertices: [
{ x: 100, y: 200 },
{ x: 300, y: 120 },
],
})
}
4.3 事件系統
antv-x6支持豐富的滑鼠事件，如下：
graph.on('cell:click', ({ e, x, y, cell, view }) => { })
通過graph.on函數即可實現對事件的監聽，例如流程圖中就用到了單擊、雙擊、滑鼠移入、移出等事件。除此之外，antv-x6還支持自定義事件。
node.attr({
// 表示一個刪除按鈕，點擊時刪除該節點
image: {
event: 'node:delete',
xlinkHref: 'trash.png',
width: 20,
height: 20,
},
})
graph.on('node:delete', ({ view, e }) => {
e.stopPropagation()
view.cell.remove()
})
5 總結
antv-x6是一個功能強大、可擴展性高的可視化工具，提供了一系列開箱即用的交互軟體和簡單易用的節點定製能力，能夠幫助使用者便捷地創建流程圖、ER圖等交互性較強的應用。本次分享介紹了x6的基本功能，更多高級功能有待我們進一步學習和探索。
作者：京東物流 顏之婷
來源：京東雲開發者社區 自猿其說Tech
