一文講述G6實現流程圖繪制的常用方法

摘要：G6 是一個圖可視化引擎。它提供了圖的繪制、布局、分析、交互、動畫等圖可視化的基礎能力。

本文分享自華為雲社區《會用這些的api，輕松繪制流程圖——antv.g6流程圖入門》，作者：一枚搬磚工 。

常用graph屬性和方法

graph屬性

container

height

width

modes

graph = new G6.Graph({
    container: "container",
    height: 500,
    width: 500,
    modes: {
        default: [
            "drag-canvas",
            "hover-node",
            "select-node",
            "hover-edge",
            "keyboard",
            "customer-events"
        ],
        addEdge: ["add-edge"],
        moveNode: ["drag-item"]
    },
     renderer: 'svg'
     plugins: [grid]
});

graph方法

初始化數據

data(data)

const data = {
  nodes: [
    {
      id: 'node1',
      label: 'node1',
    },
    {
      id: 'node2',
      label: 'node2',
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
  ],
};

// graph 是 Graph 的實例
graph.data(data);

節點和邊的增刪改查

add(type,model)

新增元素（節點和邊）

如果是自定義節點或者邊type為自定義節點或者邊的名稱

addItem(type, model, stack)

新增元素（節點和邊）

this.edge = this.graph.addItem('edge', {
    source: item,
    target: item,
    start: startPoint,
    end: startPoint,
    type: 'link-edge'
});

remove(node/edge)

移除節點或邊

const node = this.graph.findById(item.id)
this.graph.remove(node)

removeItem(item, stack)

刪除元素，當 item 為 group ID 時候，則刪除分組

// 通過 ID 查詢節點實例
const item = graph.findById('node');
graph.removeItem(item);

// 該操作不會進入到 undo & redo 棧，即 redo & undo 操作會忽略該操作
graph.removeItem(item, false);
//刪除邊
graph.removeItem(edge)

update(node/edge,nodeModel/edgeModel)

更新某個節點或者邊的屬性

graph.update(node, {name:1});
graph.update(edge, {name:1});

updateItem(item, model, stack)

更新元素，包括更新數據、樣式等。若圖上有 combo，使用該函數更新一個節點位置后，需要調用 updateCombo(combo) 以更新相關 combo 的位置。

graph.updateItem(edge, {
    routeName: response.routeName
});

find(type, fn)

根據具體規則查找單個元素。

const findNode = graph.find('node', (node) => {
  return node.get('model').x === 100;
});

findById(id)

根據 ID，查詢對應的元素實例

findAllByState(type,state)

查找所有處於指定狀態的元素

graph.findAllByState('node', 'selected')

getNodes()

獲取圖中所有節點的實例。

⚠️ 注意: 這里返回的是節點的實例，而不是節點的數據項。

返回值類型：Array；

節點和邊的狀態相關

setItemState(item, state, value)

設置元素狀態，當你使用自定義node節點時，setItemState方法為該方法內的setState方法。

graph.setItemState(item, 'normal', true);

坐標轉化

getPointByClient(clientX, clientY)

由於從屏幕獲取的位置與canvas的位置不同，所以這個方法是減去了canvas的left和top后的位置

視野相關

getZoom()

獲取當前視口的縮放比例

zoomTo(toRatio, center)

// 以 (100, 100) 為中心點，放大3倍
graph.zoomTo(3, { x: 100, y: 100 });

// 以當前元素位置為中心，縮小到 0.5
graph.zoomTo(0.5);

屬性相關

get(key)

// 獲取 group
const group = graph.get('group');

// 獲取 canvas 實例
const canvas = graph.get('canvas');

// 獲取 autoPaint 值
const autoPaint = graph.get('autoPaint');
const width = graph.get("width");
const height = graph.get("height");

畫布相關

destroy()

刪除畫布就是canvas

graph.destroy()

setAutoPaint(auto)

設置是否在更新/刪除后自動重繪，一般搭配 paint() 方法使用。與setItemState搭配使用，在改變元素狀態前后調用，當你使用自定義node節點時，setItemState方法為該方法內的setState方法，調用setItemState其實就是調用該node的setState方法。

const item = e.item;
const graph = this.graph;

const autoPaint = graph.get('autoPaint');
graph.setAutoPaint(false);

graph.setItemState(item, 'selected', true);

graph.paint();
graph.setAutoPaint(autoPaint);

paint()

僅重新繪制畫布。當設置了元素樣式或狀態后，通過調用 paint() 方法，讓修改生效。

refresh()

當源數據中現有節點/邊/ Combo 的數據項發生配置的變更時，根據新數據刷新視圖

graph.refresh();

setMode(mode)

切換模式，指的是在自定義行為中所定義的模式
這里的模式指的是graph的配置項modes

graph = new G6.Graph({
    modes: {
        default: [
            "drag-canvas",
            "hover-node",
            "hover-edge",
            "keyboard",
        ],
        addEdge: ["add-edge"],
        moveNode: ["drag-item"]
    },
});
const behavors = {
    'hover-node': hoverNode,
    'add-edge': addLine,
    'drag-item': dragItem,
    'select-node': selectNode,
    'hover-edge': hoverEdge,
    'keyboard':keyboard
};
export function initBehavors() {
    for (let key in behavors) {
        G6.registerBehavior(key, behavors[key])
    }
}
this.graph.setMode('default')

元素、節點和邊

元素常用方法

概念：元素是包含節點和邊的實例

getModel()

獲取元素的數據模型

// 獲取元素的數據模型
const model = item.getModel();

// 等價於
const model = item.get('model');

hasState(state)

判斷元素是否具有某種指定的狀態

item.hasState('normal')

getContainer()

獲取group

// 獲取元素的容器
const group = item.getContainer();

// 等價於
const group = item.get('group');

getType()

獲取元素的類型

// 獲取元素的類型
const type = item.getType();

// 等價於
const type = item.get('type');

getBBox()

獲取元素的包圍盒

item.getBBox();

節點常用方法

概念：節點繼承至元素，元素所有的方法節點也有

getEdges()

獲取與當前節點有關聯的所有邊

// 獲取與 node 關聯的所有邊
const edges = node.getEdges();

getInEdges()

獲取與當前節點關聯的所有入邊

getOutEdges()

獲取與當前節點關聯的所有出邊

// 獲取與 node 關聯的所有出邊
const edges = node.getOutEdges();

邊常用方法

getModel()

獲取邊的model

get(key)

獲取屬性值

getSource()

獲取當前邊的起始節點

組(group)的使用

常用方法

addShape(type,cfgs)

自定義行為

G6 的自定義機制，包括自定義節點、自定義邊、自定義 combo、自定義交互行為、自定義布局的相關方法。它們都被掛載在 G6 全局上，通過 G6.registerXXX 進行調用。

自定義節點

registerNode(nodeName, options, extendedNodeName)

G6.registerNode(
  'nodeName',
  {
    /**
     * 繪制節點，包含文本
     * @param  {Object} cfg 節點的配置項
     * @param  {G.Group} group 圖形分組，節點中的圖形對象的容器
     * @return {G.Shape} 繪制的圖形，通過 node.get('keyShape') 可以獲取到
     */
    draw(cfg, group) {},
    /**
     * 繪制后的附加操作，默認沒有任何操作
     * @param  {Object} cfg 節點的配置項
     * @param  {G.Group} group 圖形分組，節點中的圖形對象的容器
     */
    afterDraw(cfg, group) {},
    /**
     * 更新節點，包含文本
     * @override
     * @param  {Object} cfg 節點的配置項
     * @param  {Node} node 節點
     */
    update(cfg, node) {},
    /**
     * 更新節點后的操作，一般同 afterDraw 配合使用
     * @override
     * @param  {Object} cfg 節點的配置項
     * @param  {Node} node 節點
     */
    afterUpdate(cfg, node) {},
    /**
     * 設置節點的狀態，主要是交互狀態，業務狀態請在 draw 方法中實現
     * 單圖形的節點僅考慮 selected、active 狀態，有其他狀態需求的用戶自己復寫這個方法
     * @param  {String} name 狀態名稱
     * @param  {Object} value 狀態值
     * @param  {Node} node 節點
     */
    setState(name, value, node) {},
    /**
     * 獲取錨點（相關邊的連入點）
     * @param  {Object} cfg 節點的配置項
     * @return {Array|null} 錨點（相關邊的連入點）的數組,如果為 null，則沒有錨點
     */
    getAnchorPoints(cfg) {},
  },
  'extendedNodeName',
);

注冊自定義行為注意事項

1. 必須有自定義文件
2. 必須使用registerBehavior
3. modes中添加注冊的行為

自定義文件：selectNode.js,內容如下：

//自定義文件
let selectNode = {
    getEvents(){
        return {
            'node:click':'onClick'
        }
    },
    onClick(e){
         console.log(e)
    }
}
//注冊自定義行為
this.behavors = {
    'select-node':selectNode
}
 
for(let key in this.behavors){
    G6.registerBehavior(key,this.behavors[key])
}
//Graph對象中引用該行為
const graph = new G6.Graph({
    container: 'flow_container', 
    width, 
    height,
    fitCenter: true,
    modes: {
        default: ["select-node",],
     }
});

自定義邊

registerEdge(edgeName, options, extendedEdgeName)

G6.registerEdge(
  'edgeName',
  {
    /**
     * 繪制邊，包含文本
     * @param  {Object} cfg 邊的配置項
     * @param  {G.Group} group 圖形分組，邊中的圖形對象的容器
     * @return {G.Shape} 繪制的圖形，通過 node.get('keyShape') 可以獲取到
     */
    draw(cfg, group) {},
    /**
     * 繪制后的附加操作，默認沒有任何操作
     * @param  {Object} cfg 邊的配置項
     * @param  {G.Group} group 圖形分組，邊中的圖形對象的容器
     */
    afterDraw(cfg, group) {},
    /**
     * 更新邊，包含文本
     * @override
     * @param  {Object} cfg 邊的配置項
     * @param  {Edge} edge 邊
     */
    update(cfg, edge) {},
    /**
     * 更新邊后的操作，一般同 afterDraw 配合使用
     * @override
     * @param  {Object} cfg 邊的配置項
     * @param  {Edge} edge 邊
     */
    afterUpdate(cfg, edge) {},
    /**
     * 設置邊的狀態，主要是交互狀態，業務狀態請在 draw 方法中實現
     * 單圖形的邊僅考慮 selected、active 狀態，有其他狀態需求的用戶自己復寫這個方法
     * @param  {String} name 狀態名稱
     * @param  {Object} value 狀態值
     * @param  {Edge} edge 邊
     */
    setState(name, value, edge) {},
  },
  'extendedEdgeName',
);

以上就是通過G6繪制流程圖相關的常用方法，希望對大家有所幫助~

想了解更多的AI技術干貨，歡迎上華為雲的AI專區，目前有AI編程Python等六大實戰營供大家免費學習。(六大實戰營link:http://su.modelarts.club/qQB9)

 

點擊關注，第一時間了解華為雲新鮮技術~