Antv-x6 use and summary | Jingdong logistics technical team

1 Introduction

AntV is a data visualization ( https://so.csdn.net/so/search?q=%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96&spm=1001.2101.3001.7020 ) tool ( https://antv.vision/zh/ ), which can easily create charts or other graphics, so that Our page development makes data visualization easier. After entering the website, we can see seven modules:

G2: Data-driven, highly easy-to-use, scalable visual graphics grammar
S2: Out-of-the-box multi-dimensional visual analysis table
G6: Convenient relational data visualization engine and graph analysis tool X6: Extremely
customizable, out-of-the-box, data-driven graph editing engine L7: High-performance,
high-rendering quality geospatial data visualization framework F2
: Focus on mobile-side visualization solutions, compatible with H5/applet/Weex and other multi-end environments AVA
: AVA is a technology born for easier visual analysis frame

2 installation

Install x6 via npm or yarn command

# npm
$npm install @anv/x6 --save
# yarn
$yarn add @antv/x6

After the installation is complete, use import or require to reference.

import { Graph } from 'antv/x6'

3 Basic concepts

3.1 Canvas Graph

In x6, Graph is the carrier of the graph, which contains all the elements (nodes, edges, etc.) on the graph, and also mounts the related operations of the graph (such as interactive monitoring, element operations, etc.).

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 base class Cell

The base class Cell defines the common attributes and methods of nodes and edges, such as attribute style, visibility, and business data.

cell has some basic options:

3.3 NodeNode

node is the base class of all nodes, inherits from Cell, and defines common properties and methods of nodes.

size: defines the size of the node, which is an object containing width and height properties, and the size of the node can be obtained and set through the size() method.
position: The node position, which is an object containing x and y properties.
angle: the rotation angle of the node, and the rotation center is the center of the node.

3.4 Edge

source: source object.
target: target object. Both source and target can be any element, the difference is that source is the starting point and target is the end point. For example, an arrow in a connector always points from source to target.
connector: connection line.
vertices: path points, which is an array. Edges start from the start point, pass through the waypoints in sequence, and finally reach the end point.

4 use

4.1 Create a node

1. Use constructors. X6's Shape namespace has built-in some basic nodes, such as Rect, Circle, Ellipse, etc., and you can use the constructors of these nodes to create nodes.

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. Use the VUE node

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,
  },
});

In this way, we can customize the node, which greatly increases the scalability of the node.

4.2 Node connection

  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 Event System

antv-x6 supports rich mouse events, as follows:

graph.on('cell:click', ({ e, x, y, cell, view }) => { })

Events can be monitored through the graph.on function. For example, events such as click, double-click, mouse move in, and move out are used in the flowchart. In addition, antv-x6 also supports custom events.

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 summary

antv-x6 is a powerful and highly scalable visualization tool that provides a series of out-of-the-box interactive software and easy-to-use node customization capabilities, which can help users easily create flowcharts, ER diagrams and other highly interactive applications. This sharing introduces the basic functions of x6, and more advanced functions are waiting for us to learn and explore further.

Author: JD Logistics Yan Zhiting

Source: JD Cloud developer community Ziqishuo Tech