antv-x6 使用及总结 | 京东物流技术团队

2023-07-25
北京
本文字数：2114 字
阅读完需：约 7 分钟

1 简介

AntV 是一个数据可视化（https://so.csdn.net/so/search?q=数据可视化&spm=1001.2101.3001.7020 ）的工具（https://antv.vision/zh/ ），可以方便的创建图表或者其他图形，让我们的页面开发比较轻松的让数据可视化。进入网站后，我们可以看到七个模块：

G2：数据驱动，高度易用，可扩展的可视化图形语法

S2：开箱即用的多维可视分析表格

G6：便捷的关系数据可视化引擎与图分析工具

X6：极易定制、开箱即用、数据驱动的图编辑引擎

L7：高性能、高渲染质量的地理空间数据可视化框架

F2：专注于移动端的可视化解决方案，兼容 H5/小程序/Weex 等多端环境

AVA：AVA 是为了更简便的可视分析而生的技术框架

2 安装

通过 npm 或 yarn 命令安装 x6

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

复制代码

安装完成之后，使用 import 或 require 进行引用。

import { Graph } from 'antv/x6'

复制代码

3 基础概念

3.1 画布 Graph

在 x6 中，Graph 是图的载体，它包含图上的所有元素（节点、边等），同时挂载了图的相关操作（如交互监听、元素操作等）。

const graph = new Graph({  panning:true //支持平移  selecting: {    enabled: true, //支持选中    multiple: true,    movable: true, //支持拖动  }}graph.zoom(0.2) //在原来缩放级别上增加0.2graph.zoom(-0.2) //在原来缩放级别上减少0.2

复制代码

3.2 基类 Cell

基类 Cell 定义了节点和边共同属性和方法，如属性样式、可见性、业务数据。

cell 有一些基础选项：

3.3 节点 Node

node 是所有节点的基类，继承自 Cell，并定义了节点的通用属性和方法。

size:定义节点大小，是一个包含 width 和 height 属性的对象，可以通过 size()方法来获取和设置节点大小。
position:节点位置，是一个包含 x 和 y 属性的对象。
angle:节点的旋转角度，旋转中心为节点的中心。

3.4 边 Edge

source: 源对象。
target: 目标对象。source 和 target 都可以是任何元素，区别是，source 是起点，target 是终点。例如，con-nector 中的箭头总是从 source 指向 target。
connector: 连接线。
vertices:路径点，是一个数组。边从起点开始，按顺序经过路径点，最后到达终点。

4 使用

4.1 创建节点

1.使用构造函数。 X6 的 Shape 命名空间中内置了一些基础节点，如 Rect、Circle、Ellipse 等，可以使用这些节点的构造函数来创建节点。

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.使用 VUE 节点

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

复制代码

这样，我们就可以自定义节点，大大增加了节点的可扩展性。

4.2 节点连线

  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 事件系统

antv-x6 支持丰富的鼠标事件，如下：

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

复制代码

通过 graph.on 函数即可实现对事件的监听，例如流程图中就用到了单击、双击、鼠标移入、移出等事件。除此之外，antv-x6 还支持自定义事件。

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 总结

antv-x6 是一个功能强大、可扩展性高的可视化工具，提供了一系列开箱即用的交互软件和简单易用的节点定制能力，能够帮助使用者便捷地创建流程图、ER 图等交互性较强的应用。本次分享介绍了 x6 的基本功能，更多高级功能有待我们进一步学习和探索。

作者：京东物流颜之婷
来源：京东云开发者社区自猿其说 Tech

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/89c3b7510fe2bb2307333dddc】。文章转载请联系作者。

京东科技开发者

关注

拥抱技术，与开发者携手创造未来！ 2018-11-20 加入

我们将持续为人工智能、大数据、云计算、物联网等相关领域的开发者，提供技术干货、行业技术内容、技术落地实践等文章内容。京东云开发者社区官方网站【https://developer.jdcloud.com/】，欢迎大家来玩

发布

暂无评论

创作场景

antv-x6 使用及总结 | 京东物流技术团队

1 简介

2 安装

3 基础概念

3.1 画布 Graph

3.2 基类 Cell

3.3 节点 Node

3.4 边 Edge

4 使用

4.1 创建节点

4.2 节点连线

4.3 事件系统

5 总结

京东科技开发者

评论