/ / version < = 3.2 < script SRC = "https://gw.alipayobjects.com/os/antv/pkg/_antv.g6- {$version} / build/g6. Js" > < / script > / / Version > = 3.3 < script SRC = "https://gw.alipayobjects.com/os/lib/antv/g6/ {$version} / dist/g6. Min. Js" > < / script > / / version > = 4.0 < script SRC = "https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js" > < / script >Copy the code

⚠ ️ note:

• in{$version}Enter the version number, for example3.7.1;
• You can view the latest version and version number in NPM.
• See the Github branch at github.com/antvis/g6/t… .

You need to create a container in HTML to hold the g6-drawn diagram, usually a div tag. G6 will append the Canvas tag under the container when drawing, and then draw the graph in it.

<div id="mountNode"></div>
Copy the code

When creating a diagram (instantiation), you need to set the container, width, and height for the diagram at a minimum.

Here is a vue+typescript creation example

// Create Graph instance const graphDom: HTMLDivElement = this.$refs.mountNode as HTMLDivElement; Graph = new g6. graph ({container: graphDom, fitView: true, // Whether to enable canvas adaptation. After this function is enabled, the image automatically ADAPTS to the canvas size. FitViewPadding: 100, // Canvas padding-value modes: {default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // Allows dragging canvas, zooming canvas, dragging node, highlighting}}); this.graph.read(this.graphData); // The read method is equivalent to the data and render methods combined.Copy the code

Read for about 15 minutes

The G6 offers nine built-in edges:

• Line: a straight line that does not support control points.
• Polyline: polyline, supporting multiple control points;
• The arc of an arc
• Quadratic: a second-order Bessel curve;
• Cubic: Third-order Bessel curve;
• Cubic -vertical: third-order Bezier curve in the vertical direction, regardless of control points passed in from the user externally;
• Cubic -horizontal: third-order Bezier curve in horizontal direction, regardless of control points passed in by the user from outside;
• Loop: self-loop.

The default styles for these built-in edges are shown below.

Various built-in edge types in G6, general properties of built-in edges, and configuration methods. Each type of detailed configuration items and configuration method reference website while the overview | G6 (antv. Vision).

Special interaction

When a node hover needs to be implemented in the project, the pop-up window displays the details of the node, as shown in the figure below

The following code

Const tooltip = new G6.Tooltip({offsetX: -80, offsetY: -60, getContent(e: any) { const outDiv = document.createElement('div'); outDiv.style.width = '180px'; outDiv.innerHTML = `<ul> <li>${e.item? .getModel().label}</li> </ul>` return outDiv; }, itemTypes: ['node'] });Copy the code

Graph = new g6. graph ({container: graphDom, // DOM container plugins: {type: 'dagre', Rankdir: 'LR', linkDistance: 150,},});Copy the code

Base Event Event | G6 (gitee. IO)

The following is an example

This.graph. on('node:click', (e) => {const nodeItem: any = e.tem; console.log('node:click', nodeItem.getModel()); });Copy the code

The events are summarized as follows

• Node :click Triggered when the left mouse button is clicked on a node

• Node :dblclick Triggered when the left mouse button is double clicked on a node

• Node: mouseEnter Triggered when the mouse moves into a node

• Node: Mousemove Triggers when the mouse moves inside a node

• Node: Mouseout Triggered when the mouse is removed from a node

• Node: MouseOver Is triggered when the mouse moves over a node

• Node :mouseleave Triggered when the mouse moves out of a node

• Node: MouseDown Triggered when the mouse button is pressed (left or right) on a node

• Node: Triggered when the mouse button pressed on the mouseup node is released

• Node: dragStart Triggered when a node begins to be dragged. This event is applied to the node being dragged

• Triggered when a node is being dragged. This event applies to the node being dragged

• Node: dragEnd Triggered when the drag is complete. This event applies to the node being dragged

• Node :dragenter Triggered when a drag node enters the target element. This event is applied to the target element

• Node :dragleave Triggered when the drag node leaves the target element. This event is applied to the target element

• Node :dragover Triggered when a drag node is moved on another target element. This event is applied to the target element

• Node: Drop This event is triggered when the mouse is released over the target element when the node is dropped

• Node: ContextMenu Triggers and opens the right-click menu when the user right-clicks on a node

Clicking on an edge triggers the SAO action for the specified edge

For example, to achieve the effect shown below

Perusing the entire API documentation for antV G6 led me to one

Use graph.getedges () to get all edge instances and iterate to see if the currently clicked edge belongs to the same path relationship (parent ID). If so, select, otherwise clear the selected effect

This.graph. on('edge:click', (e) => {const currentItem: any = e.tem.getModel (); // console.log('edge:click', currentItem); this.graph.setAutoPaint(false); const edges = this.graph.getEdges(); edges.map(item => { const edgeItem = item.getModel(); const intersect = Common.intersect(edgeItem.pathId, currentItem.pathId); if (intersect.length > 0) { this.graph.setItemState(item, 'selected', true); } else { this.graph.setItemState(item, 'selected', false); }; }) this.graph.paint(); this.graph.setAutoPaint(true); });Copy the code

Common. Intersect method /** * return intersection of two arrays * @param arr1 array 1 * @param arr2 array 2 * @returns Return intersection of two arrays */ INTERSECT: (arr1: number[], arr2: number[]) => { return arr1.filter(x => new Set(arr2).has(x)); }Copy the code

The required data format is shown as follows

Private graphData: any = {// Nodes: [{id: '1', // String, if the node exists, the unique identifier of the node is required // x: 100, // Number, optional, the x value of the node position // y: 200, // Number, optional, y value of node position label: 'S1', style: { '#16e473', // Style attributes, element fill color stroke: '#888', // style attributes, element lineWidth: 1, // node stroke thickness //... // Other style attributes, icon: {show: Iconfont width: 20, height: 20,},}, {id: '8', // String 'B', // node text labelCfg: {// Label configuration attribute position: 'bottom', // label attribute position in the element style: FontSize: 12, // tag style attribute, text fontSize fill: '# ff578b' / /... / / label other style attribute}},}, {id: '2', / / String, there must be, the node node of unique identification label: 'A',}, {id: Label: 'Z1', labelCfg: {// Label configuration attribute position: 'bottom', // Label configuration attribute position: 'bottom', // Label configuration attribute position: 'bottom', // Label configuration attribute position in the element style: FontSize: 12, // tag style attribute, text fontSize fill: '#00f3f6' //... // Other style attributes of the label}},}, {id: '4', // String, the unique identifier of the node is required if the node exists. Label: 'Z2', // node text labelCfg: {// Tag configuration attribute position: 'bottom', // Tag attribute position in the element style: {// Tag style attribute field style in parallel with other tag attributes in the data structure fontSize: Fill: 'red' //... // Other style attributes of the label}},}, {id: '7', // String, if the node exists, must, the unique identifier of the node label: 'Z', // node text labelCfg: {// Label configuration attribute position: 'bottom', // label attribute position in the element style: FontSize: 12, // tag style attribute, text fontSize fill: '#ff578b' //... // Other style attributes of the label}},}, {id: '5', // String, the unique identifier of the node is required if the node exists, label: 'S2', // node text labelCfg: {// Tag configuration attribute position: 'bottom', // Tag attribute position in the element style: {// Tag style attribute field style in parallel with other tag attributes in the data structure fontSize: // Other style attributes of the label}},}, {id: '6', // unique identifier of the node. Label: 'Y', // node text labelCfg: {// Tag configuration attribute position: 'bottom', // Tag attribute position in the element style: {// Tag style attribute field style in parallel with other tag attributes in the data structure fontSize: Edges: [{pathId: [2], source: edges: [{pathId: [2], source: '1', // String, must, start point ID target: '2', // String, must, target point id label: 's1-a ', // node text}, {pathId: [1,3], source: '8', // String, must, start point id target: '6', // String, must, target point id}, {pathId: [2], source: '8', // String, must, start point id target: '3', // String, must, target point ID labelCfg: {autoRotate: true, // Make text rotate with edge Style: {stroke: 'white', // Add white edge and white background to text lineWidth: Fill: '#722ed1', // text color}},}, {pathId: [3], source: '3', // String, must, start point id target: '4', // String, must, target id}, {pathId: [2,3], source: '3', // String, must, start id target: '6', // String, must, target id}, {pathId: [1,2], source: '6', // String, must, start id target: '7', // String, must, target id}, {pathId: [1,2,3], source: '2', // String, must, start id target: '8', // String, must, target id label: 'A - B' text / / node / / color: # 722 ed1, / / color labelCfg: {position: 'end', refY: - 10,}}, {pathId: [1, 3], the source: '5', // String, must, start point ID target: '2', // String, must, target point ID label: 's2-a ', // node text labelCfg: {refY: -10,}}],};Copy the code