vue2 antv x6 入门 （一）画布、节点、边

安装

# npm
npm install @antv/x6 --save

# yarn
yarn add @antv/x6

1. 初始化画布

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

import { Graph } from '@antv/x6'

const graph = new Graph({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
  background: {
    color: '#F2F7FA',
  },
})

2、渲染节点和边

X6 支持 JSON 格式数据

该对象中 

nodes 代表节点数据，

edges 代表边数据，

可以使用 attrs 属性来定制节点和边的样式（可以类比 CSS）。

3、画布添加节点、边

创建data1.js文件

const data = {
  nodes: [
    {
      id: 'node1',  // id唯一标识
      shape: 'rect',
      x: 40,
      y: 40,
      width: 100,
      height: 40,
      label: 'hello',
      attrs: {
        // body 是选择器名称，选中的是 rect 元素
        body: {
          stroke: '#8f8f8f', //边的颜色
          strokeWidth: 1, // 边线宽
          fill: '#fff', // 背景颜色，跟选择相关，如果是文字fill代表是字体颜色
          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,
        },
      },
    },
  ],
}

export default data

页面使用   json数据

graph.fromJSON(data) // 渲染元素
graph.centerContent() // 居中显示

效果

 页面代码

 
<template>
  <div>
    <div id="container"></div>
  </div>
</template>
<script>
import { Graph } from '@antv/x6'
import dataJSON from './data1'
export default {
  name: 'index2Page',
  data() {
    return {
      graph: null
    }
  },
  mounted() {
    this.initGraph()
  },
  methods: {
    initGraph() {
      this.graph = new Graph({
        container: document.getElementById('container'),
        width: 800,
        height: 600,
        background: {
          color: '#F2F7FA'
        }
      })
      console.log(dataJSON)
      this.graph.fromJSON(dataJSON) // 渲染元素
　　　 this.graph.centerContent() // 居中显示

    }
  }
}
</script>

这里是重点：

X6 支持使用 SVG、HTML 来渲染节点内容，在此基础上，我们还可以使用 React、Vue 组件来渲染节点，这样在开发过程中会非常便捷。在拿到设计稿之后，你就需要权衡一下使用哪一种渲染方式，可以参考下面的一些建议：

• 如果节点内容比较简单，而且需求比较固定，使用 SVG 节点
• 其他场景，都推荐使用当前项目所使用的框架来渲染节点

loading......

antx6---参考官网