了解AntV/x6

这篇具有很好参考价值的文章主要介绍了了解AntV/x6。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先放官网和图片,最好的学习地方仍然是官网。

官网:https://x6.antv.antgroup.com/

介绍:X6 是基于 HTML 和 SVG 的图编辑引擎,提供低成本的定制能力和开箱即用的内置扩展,方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。

这个流程图其实是Echarts没有的,相信很多和我一样的人。做项目要用到Echarts没有,然后就搜索到了这个。你如果会用Echarts,其实你已经会了一半,虽然Echarts是基于Canvas画图的,但是两者的用法和API调用基本相同,实际用起来去官网看API即可。

了解AntV/x6

一、了解antv/x6

刚才上面提到了它是基于 HTMLSVG 的图编辑引擎,我们可以简单的理解成,我创建了一个SVG标签,给这的SVG标签设置各种的规则,然后特定的API/标签在里面画图,最后用事件触发把他们联系在一起。

步骤:

  1. 创建一个标签,成为容器container

  1. 声明一些需要的节点/边的数据

  1. new一个实例对象,使用antv/x6的API在里面设置画布的规则

  1. 把数据放入这个实例中,在画布中渲染出来

这里示范的是vue2+antv/x6

<template>
  <div id="home">
    <div>
      <button class="btn" @click="this.toSVG">导出</button>
    </div>
    <div id="container"></div>
  </div>
</template>
<script>
// 引入antv/x6
import { Graph, DataUri } from "@antv/x6";

export default {
  name: "APP",
  data() {
    return {
      graph: null, // 画布实例对象
      data: {
        nodes: [
          {
            id: "node1",
            shape: "rect",
            x: 100,
            y: 100,
            width: 80,
            height: 40,
            label: "hello",
          },
          {
            id: "node2",
            shape: "ellipse",
            x: 240,
            y: 300,
            width: 80,
            height: 40,
            label: "world",
          },
        ],
        edges: [
          {
            source: "node1",
            target: "node2",
            shape: "double-edge",
          },
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.initGraph();
  },
  methods: {
    /** 初始化流程图画布 */
    initGraph() {
      /** 使用Graph API创造出实例对象,开始在SVG上画图/事件处理 */
      this.graph = new Graph({
        container: document.getElementById("container"), // 画布容器
        width: 800, // 画布宽
        height: 600, // 画布高
        background: {
          color: "#ffffff",
        }, // 背景颜色设置
        snapline: true, // 对齐线
        // 配置连线规则
        connecting: {
          snap: true, // 自动吸附
          allowBlank: true, //是否允许连接到画布空白位置的点
          allowMulti: false, //是否允许在相同的起始节点和终止之间创建多条边
          allowLoop: false, //是否允许创建循环连线,即边的起始节点和终止节点为同一节点
          highlight: true, //拖动边时,是否高亮显示所有可用的节点
          validateEdge({ edge, type, previous }) {
            // 连线时设置折线
            edge.setRouter({
              name: "er",
            });
            // 设置连线样式
            edge.setAttrs({
              line: {
                stroke: "#275da3",
                strokeWidth: 4,
              },
            });
            return true;
          },
        },
        panning: {
          enabled: false, // 支持画布拖拽平移
        },
        mousewheel: {
          enabled: true, // 支持滚动放大缩小
        },
        // 网格设置
        grid: {
          type: "mesh",
          size: 20, // 网格大小 10px
          visible: true, // 渲染网格背景
          args: {
            color: "#000000", // 网格线/点颜色
            thickness: 2, // 网格线宽度/网格点大小
          },
        },
        translating: {
          restrict: true,
        },
      });
      this.graph.fromJSON(this.data);
    },
    /** 点击导出SVG */
    toSVG() {
      this.graph.toSVG((dataUri) => {
        // 下载
        DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), "chart.svg");
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.btn {
  width: 10vw;
  height: 5vh;
  background: #bbffff;
  margin: 10px;
  border: 1px solid #000000;
}
</style>
了解AntV/x6

这样一个最简单的数据指向图就做好了,但是我们做的肯定没有那么简单,一般情况下需要可以进行链接,拖拽进入可以生成新的模块,连接的点那些可以连接/不可以连接等。这里就需要设置连接桩/交互/事件等,接着往下看,切记一定要沉下心来,这里出错了有的是不会显示的,需要配合Console和console.log一起来找。

二、Graph的配置

官网上是以画布/节点/边/连接桩/交互/事件/数据的顺序介绍的,我也以此开始讲解,官网更加清晰,可以直接移步官网查看。

  1. 画布

这个画布在上面的代码中已经写过了,就是设置画布的背景颜色/大小/缩放/网格等,这个比较简单,需要什么直接放进去就可以实现了。

  1. 节点

上面的代码我是把数据放在data里面(官网是放在initGraph()里面),最后通过数据的导入,实现画布的渲染。如果是十个以内的数据还好,一旦多起来,可以发现里面有很多的相同的属性/数据,这里的节点相当于是毛胚房,你想要什么样的房子自己装修就好。

官方解释:节点和边都有共同的基类 Cell,除了从 Cell 继承属性外,其他的可以在graph.addNode( )设置,可以实现定制节点/修改节点。

这里有一个坑一定要注意: graph.fromJSON()和graph.addNode()的顺序,graph.fromJSON()在前,不然会看不见添加的节点。

明白了这一个,那么我们就知道了,添加所有的这种相似的都可以使用此方法。如果我们要拖拽一个模板进来,就相当于在其中添加了一个定制的节点,其位置就是鼠标放开的位置。

步骤:

  1. 注册节点 Graph.registerNode()

  1. 使用注册的节点

  1. 添加这两个节点边(箭头)

//和官网一样直接添加在initGraph()里面就可以了
//这里有一个坑一定要注意: graph.fromJSON()和graph.addNode()的顺序,graph.fromJSON()在前,不然会看不见添加的节点
Graph.registerNode(
        "custom-node",
        {
          inherit: "rect", // 继承于 rect 节点
          width: 100,
          height: 40,
          markup: [
            {
              tagName: "rect", // 标签名称
              selector: "body", // 选择器
            },
            {
              tagName: "image",
              selector: "img",
            },
            {
              tagName: "text",
              selector: "label",
            },
          ],
          attrs: {
            body: {
              stroke: "#8f8f8f",
              strokeWidth: 1,
              fill: "#fff",
              rx: 6,
              ry: 6,
            },
            img: {
              "xlink:href":
                "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png",
              width: 16,
              height: 16,
              x: 12,
              y: 12,
            },
          },
        },
        true
      );

const source = graph.addNode({
      shape: 'custom-node', // 可以直接使用上面注册过的 shape
      x: 40,
      y: 40,
      label: 'hello',
    })
const target = graph.addNode({
      shape: 'custom-node',
      x: 160,
      y: 180,
      label: 'world',
    })
//修改节点的数据
source.prop("size", { width: 120, height: 50 }); // 修改 x 坐标
source.attr("rect/fill", "#ccc"); // 修改填充色,等价于 source.prop('attrs/rect/fill', '#ccc')
graph.addEdge({
      source,
      target,
      attrs: {
        line: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
        },
      },
    })
  1. 边(箭头)

这里官网上的意思是Edge边,但是我自己更习惯称为箭头,感觉更贴切吧。

edge里面的配置:

  1. source: rect1, target: rect2, 源 ---> 节点

  1. vertices: [ { x: 100, y: 200 }, { x: 300, y: 120 }, ], 顶点(边经过的顶点)

  1. router: "orth", 路径:默认是直线;

  1. connector: { name: "rounded", args: {}, },简写写 connector: 'rounded'连接器:圆形的

  1. labels: [ { attrs: { label: { text: "edge", }, }, position: 0.4,}, ],设置标签文本、位置、样式等。简化写法:labels: ["edge"],

  1. 设置边上的箭头(这里可以直接设用已经预设好的)

attrs: {
    line: {
      sourceMarker: "block", // 实心箭头
      targetMarker: {
        name: "ellipse", // 椭圆
        rx: 10, // 椭圆箭头的 x 半径
        ry: 6, // 椭圆箭头的 y 半径
      },
    },
  },

7.修改边与修改节点的方式有所不同,节点是不统一的,哪一个修改就是哪一个。边是统一的的,直接使用edge.prop("target", { x: 300, y: 300 }); // 修改终点e

dge.attr("line/stroke", "#ccc"); // 修改边颜色,等价于 edge.prop('attrs/line/stroke', '#ccc')

  1. 连接桩

就是每个节点连接的位置,有几个/在那个位置/应该怎么连接等。

步骤:

  1. 在 Graph.registerNode()注册的节点中配置ports,并通过 groups 选项来设置分组

  1. groups内分上下左右,再对上下的port设置即可

  1. 在添加节点的时候graph.addNode因为加入了ports,也需要在其中配置ports的属性

了解AntV/x6
  1. 交互(连接的配置)

主要记住这个连接的配置是在画布上的,new Graph({})

这个记不住的,直接翻过去照着一个个找,用就对了。

  1. 事件

看代码很容易理解,监听画布的 cell节点/单击、节点/单击、边/单击、空白区域/单击

这里数据太多,演示也多,直接去官网

graph.on("cell:click", ({ e, x, y, cell, view }) => {});
graph.on("node:click", ({ e, x, y, node, view }) => {});
graph.on("edge:click", ({ e, x, y, edge, view }) => {});
graph.on("blank:click", ({ e, x, y }) => {});

graph.on("cell:mouseenter", ({ e, cell, view }) => {});
graph.on("node:mouseenter", ({ e, node, view }) => {});
graph.on("edge:mouseenter", ({ e, edge, view }) => {});
graph.on("graph:mouseenter", ({ e }) => {});
  1. 数据

导出数据

  1. graph.toJSON()导出的是json数据

  1. 导出SVG或者png这里需要引入DataUri,这里导出的大小有问题,需要自己设置

 // 引入antv/x6
import { Graph, DataUri } from "@antv/x6";
/** 点击导出SVG */
toSVG() {
  graph.toSVG((dataUri) => {
        // 下载
    DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), "chart.svg");
  });
},

导入数据

导入就只能是json数据了

graph.fromJSON({ nodes: [], edges: [],});

小结:其实看完这些,做起一些简单的还是ctrl+C / V就行了,但是涉及到逻辑的连接以及对数据的有一些要求时,其中的判断就会很多,慢慢写就好。

接下来,我会自己做一个逻辑的部署图,仅供参考/持续更新文章来源地址https://www.toymoban.com/news/detail-449938.html

到了这里,关于了解AntV/x6的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue使用AntV X6绘制流程图(组态呈现)

    先上几个网址 AntV | 蚂蚁数据可视化 AntV X6 图编辑引擎 AntV X6文档 AntV X6 API AntV X6图表示例 上面是一些用到的网址,先说下我项目中的需求,就是要自己绘制出一个我们想要的图,组态化呈现出来,然后这个图中会有很多节点,每个节点都会有自己的状态 ,状态会实时改变,

    2024年02月06日
    浏览(64)
  • 「AntV」X6图编辑器的应用——流程图实现

    在线预览 源码 阮一峰:SVG图像入门 SVGtutorial 因为antv/x6是基于SVG的图编辑器,所以SVG的知识有必要了解下的 简介 可缩放矢量图形【基于图形】 全称:Scalable Vector Graphics 定义基于矢量的图形 基于XML语法 放大缩小不会失真 属于万维网标准 可以插入DOM,通过JavaScript和CSS来操作

    2024年02月09日
    浏览(53)
  • 「AntV」X6开发实践:踩过的坑与解决方案

    长期更新版文档请移步语雀(「AntV」X6开发实践:踩过的坑与解决方案 (yuque.com)) --Recent update:2024-01-05 相信你们在开发中更多的需求是需要自定义拖拽源,毕竟自定义的功能扩展性高一些,而且可以根据你的业务需求灵活设置。自定义拖拽的优点就是:万物皆可成为拖拽源,

    2024年02月08日
    浏览(104)
  • vue3+ts使用antv/x6 + 自定义节点

    使用 2.x 版本 x6.antv 新官网: 项目结构 1、初始化画布 index.vue 2、注册节点 渲染 Vue 节点,这个文档完全够用 节点node.vue 3、在画布引入并注册自定义节点,配置节点信息 主画布:index.vue 展示 小小预告: 下一篇 自定义节点样式 再下一篇 vue3 + antv/x6 实现拖拽侧边栏节点到画布

    2024年02月12日
    浏览(41)
  • 在vue3中浅尝antv X6 2.0 demo(三)

    终于抽空把antv X6 2.0这个版本的demo抽出来了,原以为项目会一直使用vue3去做这个流程,结果最近项目经理说antv X6的菜单功能只有react才能用...然鹅...写到菜单模块的时候,发现都可以用的... 目前我项目里面react版本的多一些功能(如:新增节点时自动布局、右键菜单,如图)

    2024年02月05日
    浏览(36)
  • 创建可交互的图表:AntV X6实现预留空白位置、拖拽吸附与信息修改弹框

    首先用AntV X6官网的一句简介了解一下什么是X6 X6 是基于 HTML 和 SVG 的图编辑引擎,提供低成本的定制能力和开箱即用的内置扩展,方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。 知道了X6是什么,那么我们就要开始使用了 首先得确定框架,其次就要安装X6 由于项目

    2024年02月16日
    浏览(36)
  • ubuntu深度学习使用TensorFlow卷积神经网络——图片数据集的制作以及制作好的数据集的使用

    首先我事先准备好五分类的图片放在对应的文件夹,图片资源在我的gitee文件夹中链接如下: 文件管理: 用于存各种数据 https://gitee.com/xiaoxiaotai/file-management.git  里面有imgs目录和npy目录,imgs就是存放5分类的图片的目录,里面有桂花、枫叶、五味子、银杏、竹叶5种植物,npy目

    2024年02月05日
    浏览(65)
  • AntV G6自定义节点(多边形+图片)

    要求:拓扑节点根据不同的设备类型显示不同的图标,且根据设备状态显示不同的背景色,鼠标点击选中节点还可高亮 不同设备不同图标,不同状态不同背景色 鼠标点击选中节点高亮

    2024年02月09日
    浏览(61)
  • 好的程序员不该局限技术故步自封,更多去了解产品,运营,销售,推广,公司运作吧

    在当今技术迅速发展的时代,作为程序员,我们常常面临着学习速度跟不上技术变化的困扰。每年涌现的新技术、新框架,给我们带来了巨大的挑战。尤其是随着年龄增长,学习能力的下降似乎让我们更加被动。技术的发展也并非一帆风顺,很容易陷入瓶颈,无法进一步提升

    2024年02月19日
    浏览(42)
  • 进来了解实现官网搜索引擎的三种方法

    做网站的目的是对自己的品牌进行推广,让越来越多的人知道自己的产品,但是如果只是做了一个网站放着,然后等着生意找上门来那是不可能的。在当今数字时代,实现官网搜索引擎对于提升用户体验和推动整体性能至关重要。搜索引擎可以帮助访问者快速高效地找到他们

    2024年02月07日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包