ANTV X6 库入门

快速上手

https://x6.antv.antgroup.com/tutorial/getting-started

安装

# npm
npm install @antv/x6 --save

# yarn
yarn add @antv/x6

使用

1. 一个简单的使用demo 首先定义一个container容器，用来渲染画布

<template>
	<div id="container"></div>
</template>

然后写方法

import { Graph } from '@antv/x6'

const data = ref({...})

onMounted(()=>{
  console.log(document.getElementById('container'));
  const graph = new Graph({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
  background: {
    color: '#F2F7FA',
  },
})
graph.fromJSON(data.value)
})

踩坑：一开始没有在onMounted里写方法，直接报错，原因是这个容器还没渲染出来……

2. 数据

X6支持JSON格式，nodes 代表节点数据，edges 代表边数据。

const data = {
  nodes: [
    {
      id: 'node1',
      shape: 'rect',
      x: 40,
      y: 40,
      width: 100,
      height: 40,
      label: 'hello',
      attrs: {
        // body 是选择器名称，选中的是 rect 元素
        body: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
          fill: '#fff',
          rx: 6,
          ry: 6,
        },
      },
    },
    {
      id: 'node2',
      shape: 'rect',
      x: 160,
      y: 180,
      width: 100,
      height: 40,
      label: 'world',
      attrs: {
        body: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
          fill: '#fff',
          rx: 6,
          ry: 6,
        },
      },
    },
  ],
  edges: [
    {
      shape: 'edge',
      source: 'node1',
      target: 'node2',
      label: 'x6',
      attrs: {
        // line 是选择器名称，选中的边的 path 元素
        line: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
        },
      },
    },
  ],
}