Antv.g6 flow chart introduction

Abstract: G6 is a graph visualization engine. It provides the basic capabilities of graph visualization such as drawing, layout, analysis, interaction and animation.

This article is shared from huawei cloud community “can use these API, easy to draw flow chart — ANTV.g6 Flow chart introduction”, author: a brick moving worker.

Graph properties and methods are commonly used

Graph properties

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]
});
Copy the code

Graph method

Initialize data

data(data)

const data = { nodes: [ { id: 'node1', label: 'node1', }, { id: 'node2', label: 'node2', }, ], edges: [ { source: 'node1', target: 'node2', }, ], }; // graph is an instance of graph graph. Data (data);Copy the code

Add, delete, change and check nodes and edges

add(type,model)

New elements (nodes and edges)

In the case of a user-defined node or edge, type is the name of the user-defined node or edge

addItem(type, model, stack)

New elements (nodes and edges)

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

remove(node/edge)

Removes nodes or edges

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

removeItem(item, stack)

Delete element. If item is group ID, delete group

// Query an instance of a node by ID const item = graph.findByid ('node'); graph.removeItem(item); Graph.removeitem (item, false) is ignored by redo & undo; // Remove edge graph.removeItem(edge)Copy the code

update(node/edge,nodeModel/edgeModel)

Updates the attributes of a node or edge

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

updateItem(item, model,stack)

Update elements, including updating data, styles, and so on. If combo is present on the diagram, after updating a node position with this function, you need to call updateCombo(combo) to update the position of the associated combo.

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

find(type, fn)

Find individual elements based on specific rules.

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

findById(id)

Query the corresponding element instance based on the ID

findAllByState(type,state)

Finds all elements in the specified state

graph.findAllByState('node', 'selected')
Copy the code

getNodes()

Gets instances of all nodes in the diagram.

⚠️ Note: this returns the instance of the node, not the node’s data item.

Return value type: Array;

The states of nodes and edges are related

setItemState(item, state,value)

Set element state. When you use a custom Node, the setItemState method is the setState method within the method.

graph.setItemState(item, 'normal', true);
Copy the code

Coordinate transformation

getPointByClient(clientX,clientY)

Since the position obtained from the screen is different from the canvas position, this method subtracts the left and top positions of the canvas

View related

getZoom()

Gets the zoom of the current viewport

zoomTo(toRatio, center)

// Graph. ZoomTo (3, {x: 100, y: 100}); // Graph. // zoomTo 0.5 graph.zoomto (0.5), centered on the current element position;Copy the code

Attributes related to

get(key)

// Get group const group = graph.get('group'); // Get canvas instance const canvas = graph.get('canvas'); // Get the autoPaint value const autoPaint = graph.get('autoPaint'); const width = graph.get("width"); const height = graph.get("height");Copy the code

The canvas related

destroy()

Delete canvas is canvas

graph.destroy()
Copy the code

setAutoPaint(auto)

Sets whether to automatically redraw after updates/deletes, usually with the paint() method. Used with setItemState, this method is called before and after changing the state of the element. When you use a custom Node node, setItemState is the setState method within that node.

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);
Copy the code

paint()

Just redraw the canvas. When the element style or state is set, make the changes take effect by calling the paint() method.

refresh()

When the configuration of the existing node/side/Combo data item in the source data is changed, the view is refreshed according to the new data

graph.refresh();
Copy the code

setMode(mode)

Toggle modes refer to the modes defined in the custom behavior. In this case, modes are the configuration modes of the Graph

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')
Copy the code

Elements, nodes, and edges

Common methods of elements

Concept: An element is an instance that contains nodes and edges

getModel()

Gets the data model for the element

Const model = item.getModel(); // const model = item.get('model');Copy the code

hasState(state)

Determines whether an element has a specified state

item.hasState('normal')
Copy the code

getContainer()

Obtain group

// Get the element's container const group = item.getContainer(); // const group = item.get('group');Copy the code

getType()

Gets the type of the element

// Get the type of the element const type = item.getType(); // Equivalent to const type = item.get('type');Copy the code

getBBox()

Gets the bounding box of the element

item.getBBox();
Copy the code

Common methods of nodes

Concept: Nodes inherit from elements, as do all of the element’s method nodes

getEdges()

Gets all edges associated with the current node

Const edges = Node.getedges (); // Get all edges associated with node const edges = Node.getedges ();Copy the code

getInEdges()

Gets all incoming edges associated with the current node

getOutEdges()

Gets all outgoing edges associated with the current node

Const edges = Node.getoutedges (); // Get all edges associated with node const edges = Node.getoutedges ();Copy the code

Common methods of edge

getModel()

Gets the model of the edge

get(key)

Get property values

getSource()

Gets the starting node of the current edge

The use of groups

Commonly used method

addShape(type,cfgs)

Custom behavior

The customization mechanism of G6 includes the related methods of user-defined node, user-defined edge, user-defined combo, user-defined interaction behavior and customized layout. They are both mounted globally on G6 and called through g6.registerxxx.

Custom node

registerNode(nodeName,options, extendedNodeName)

G6. RegisterNode ('nodeName', {/** ** draw the node, including text * @param {Object} CFG node configuration item * @param {g.group} group graph group, Node.get ('keyShape') {}, /** * draw(CFG, group) {}, AfterDraw (CFG, group) {}, afterDraw(CFG, group) {}, * @override * @param {Object} configuration item of the CFG Node * @param {Node} Node Node */ update(CFG, Node) {}, /** * Operation after updating the Node, * @override * @param {Object} CFG Node configuration item * @param {Node} Node Node */ afterUpdate(CFG, Node) {}, /** * Set the node state, mainly interactive state, business state please implement in draw method * single graph node only consider selected, active state, @param {String} name state name * @param {Object} value state value * @param {Node} Node Node */ setState(name, Value, node) {}, / * * * for the anchor (relevant side connected to point) * @ param {Object} CFG node configuration items * @ return {Array | null} anchor (relevant to point) on the side of an Array, if it is null, */ getAnchorPoints(CFG) {},}, 'extendedNodeName',);Copy the code

Register custom behavior considerations

1. You must have a custom file

2. RegisterBehavior must be used

3. Add the action of registration in modes

The custom file selectNode.js contains the following contents: // Custom file let selectNode = {getEvents(){return {'node:click':'onClick'}}, OnClick (e){console.log(e)}} this.behavors = {'select-node':selectNode} for(let key in this.behavors){ //Graph object reference the behavior const Graph = new g6. Graph({container: 'flow_container', width, height, fitCenter: true, modes: { default: ["select-node",], } });Copy the code

The custom side

registerEdge(edgeName,options, extendedEdgeName)

G6. RegisterEdge ('edgeName', {/** ** draw edge, contains text * @param {Object} CFG edge configuration item * @param {g.group} group, */ draw(CFG, group) {}, /** * draw(CFG, group) {}, /** * draw(CFG, group) {} AfterDraw (CFG, group) {}, afterDraw(CFG, group) {}, /** * update edge, * @param {Edge} Edge */ update(CFG, Edge) {}, /** * The operation after updating the Edge, * @override * @param {Object} CFG Edge */ afterUpdate(CFG, Edge) {}, /** * Set edge state, mainly interactive state, business state please implement in draw method * single graph edge only consider selected, active state, @param {String} name state name * @param {Object} value state value * @param {Edge} Edge Edge */ setState(name, value, edge) {}, }, 'extendedEdgeName', );Copy the code

The above is through G6 drawing flowchart related common methods, I hope to help you ~

For more AI technology dry goods, welcome to huawei cloud AI zone, currently there are AI programming Python and other six combat camps for everyone to learn for free.

Click to follow, the first time to learn about Huawei cloud fresh technology ~