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

京东云开发者
• 阅读 481

1 简介

AntV是一个数据可视化(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 )的工具(https://antv.vision/zh/ ),可以方便的创建图表或者其他图形,让我们的页面开发比较轻松的让数据可视化。进入网站后,我们可以看到七个模块:

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

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.2
graph.zoom(-0.2) //在原来缩放级别上减少0.2

3.2 基类Cell

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

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

cell有一些基础选项:

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

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)

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

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

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

4.3 事件系统

antv-x6支持丰富的鼠标事件,如下:

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()
})

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

5 总结

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

作者:京东物流 颜之婷

来源:京东云开发者社区 自猿其说Tech

点赞
收藏
评论区
推荐文章
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
3年前
G6:AntV 的图可视化与图分析
!(https://pic1.zhimg.com/v2de9f0f46f75755ef43373a1ee0e0e2cf_1200x500.jpg)导读G6是AntV旗下的一款专业级图可视化引擎,它在高定制能力的基础上,提供简单、易用的接口以及一系列设计优雅的图可视化解决方案,是阿里经济体图可视化与图分析的基础设施。今年AntV1
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Stella981 Stella981
3年前
Linux日志安全分析技巧
0x00前言我正在整理一个项目,收集和汇总了一些应急响应案例(不断更新中)。GitHub地址:https://github.com/Bypass007/EmergencyResponseNotes本文主要介绍Linux日志分析的技巧,更多详细信息请访问Github地址,欢迎Star。0x01日志简介Lin
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
铁扇公主 铁扇公主
1年前
Mac上好用的原型设计软件Axure RP 9介绍
AxureRP9是一款功能强大的原型设计工具,它可以帮助用户创建交互式原型、流程图、线框图等,以便于设计和测试网页和移动应用程序。AxureRP9的主要功能包括:1.创建原型设计:该软件提供了丰富的用户界面元素、交互动画和效果,用户可以使用这些元素创建交互
铁扇公主 铁扇公主
1年前
Mac电脑好用的绘图软件 OmniGraffle Pro for mac
OmniGrafflePro是一款专业的图形设计和绘图软件,该软件旨在帮助用户创建精美的图表、流程图、组织结构图、原型设计和其他可视化图形。OmniGrafflePro提供了丰富的工具和功能,使用户能够轻松制作复杂的图形和图表。以下是OmniGraffle