antV的X6使用

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量8.2k 收藏 28
点赞数 5
分类专栏： 工具库 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45137565/article/details/124886266
版权

醉卧沙场君莫笑，古来征战几人还。


在这里插入图片描述


一、简介

数据驱动的图形编辑引擎，以流程图展示关系流程，支持拖拽

在这里插入图片描述




二、基础使用

所有图表示例

1. 实现一个最简易的Graph

⑴. 安装
# npm
$ npm install @antv/x6 --save

# yarn
$ yarn add @antv/x6

⑵. vue代码

react 的通道 ->

<template>
    <div id="container" />
</template>
<script>
import { Graph } from "@antv/x6";
export default {
    name: "",
    data() {
        return {};
    },
    mounted() {
        this.initGraph();
    },
    methods: {
        initGraph() {
            // 1. 节点 nodes 和边 edges 字段 的 JSON 数据
            const data = {
                // 节点
                nodes: [
                    {
                        id: "node1", // String，可选，节点的唯一标识
                        x: 40, // Number，必选，节点位置的 x 值
                        y: 40, // Number，必选，节点位置的 y 值
                        width: 80, // Number，可选，节点大小的 width 值
                        height: 40, // Number，可选，节点大小的 height 值
                        label: "hello" // String，节点标签
                    },
                    {
                        id: "node2", // String，节点的唯一标识
                        x: 160, // Number，必选，节点位置的 x 值
                        y: 180, // Number，必选，节点位置的 y 值
                        width: 80, // Number，可选，节点大小的 width 值
                        height: 40, // Number，可选，节点大小的 height 值
                        label: "world" // String，节点标签
                    }
                ],
                // 边
                edges: [
                    {
                        source: "node1", // String，必须，起始节点 id
                        target: "node2" // String，必须，目标节点 id
                    }
                ]
            };

            // 2. 渲染画布
            const graph = new Graph({
                container: document.getElementById("container"),
                width: 800,
                height: 600
            });

            // 3. 渲染我们的节点和边
            graph.fromJSON(data);
        }
    }
};
</script>

⑶. 效果展示

在这里插入图片描述


2. 背景和网格

可设置背景颜色和网格，另外还支持背景图片、网格类型等配置

在这里插入图片描述

const graph = new Graph({
  // ...
  background: {
    color: '#fffbe6', // 设置画布背景颜色
  },
  grid: {
    size: 10,      // 网格大小 10px
    visible: true, // 渲染网格背景
  },
});


3. 缩放和平移

能够缩放和平移画布

在这里插入图片描述

<template>
    <div>
        <button @click="enlarge">缩小</button>
        <button @click="narrow">缩小</button>
        <button @click="move">平移</button>
        <div id="container" />
    </div>
</template>
<script>
import { Graph } from "@antv/x6";
export default {
    name: "",
    data() {
        return {
            graph: {}
        };
    },
    mounted() {
        this.initGraph();
    },
    methods: {
        initGraph() {
            // 1. 节点 nodes 和边 edges 字段 的 JSON 数据
            const data = {
                // 节点
                nodes: [
                    {
                        id: "node1", // String，可选，节点的唯一标识
                        x: 40, // Number，必选，节点位置的 x 值
                        y: 40, // Number，必选，节点位置的 y 值
                        width: 80, // Number，可选，节点大小的 width 值
                        height: 40, // Number，可选，节点大小的 height 值
                        label: "hello" // String，节点标签
                    },
                    {
                        id: "node2", // String，节点的唯一标识
                        x: 160, // Number，必选，节点位置的 x 值
                        y: 180, // Number，必选，节点位置的 y 值
                        width: 80, // Number，可选，节点大小的 width 值
                        height: 40, // Number，可选，节点大小的 height 值
                        label: "world" // String，节点标签
                    }
                ],
                // 边
                edges: [
                    {
                        source: "node1", // String，必须，起始节点 id
                        target: "node2" // String，必须，目标节点 id
                    }
                ]
            };

            // 2. 渲染画布
            this.graph = new Graph({
                container: document.getElementById("container"),
                width: 800,
                height: 600,
                background: {
                    color: "#fffbe6" // 设置画布背景颜色
                },
                grid: {
                    size: 10, // 网格大小 10px
                    visible: true // 渲染网格背景
                }
            });

            // 3. 渲染我们的节点和边
            this.graph.fromJSON(data);
        },
        enlarge() {
            this.graph.zoom(-0.5);
        },
        narrow() {
            this.graph.zoom(0.5);
        },
        move() {
            this.graph.translate(80, 40)
        }
    }
};
</script>


4. 节点

可以通过 shape 属性为节点指定渲染的图形

在这里插入图片描述

            // 1. 节点 nodes 和边 edges 字段 的 JSON 数据
            const data = {
                // 节点
                nodes: [
                    {
                        id: "node1",
                        shape: "rect", // 使用 rect 渲染
                        x: 100,
                        y: 200,
                        width: 80,
                        height: 40,
                        label: "hello"
                    },
                    {
                        id: "node2",
                        shape: "ellipse", // 使用 ellipse 渲染
                        x: 300,
                        y: 200,
                        width: 80,
                        height: 40,
                        label: "world"
                    }
                ],
                edges: [
                    {
                        source: "node1",
                        target: "node2"
                    }
                ]
            };


5. 定制节点样式

可以通过 attrs 对象来配置节点样式

在这里插入图片描述

            // 1. 节点 nodes 和边 edges 字段 的 JSON 数据
            const data = {
                // 节点
                nodes: [
                    {
                        id: "node1",
                        x: 40,
                        y: 40,
                        width: 100,
                        height: 40,
                        attrs: {
                            body: {
                                fill: "#2ECC71",
                                stroke: "#000",
                                strokeDasharray: "10,2"
                            },
                            label: {
                                text: "Hello",
                                fill: "#333",
                                fontSize: 13
                            }
                        }
                    },
                    {
                        id: "node2",
                        x: 180,
                        y: 240,
                        width: 100,
                        height: 40,
                        attrs: {
                            body: {
                                fill: "#F39C12",
                                stroke: "#000",
                                rx: 16,
                                ry: 16
                            },
                            label: {
                                text: "World",
                                fill: "#333",
                                fontSize: 18,
                                fontWeight: "bold",
                                fontVariant: "small-caps"
                            }
                        }
                    }
                ],
                edges: [
                    {
                        source: "node1",
                        target: "node2"
                    }
                ]
            };


6. 边

可以通过 shape 属性为边指定渲染的图形

在这里插入图片描述

            // 1. 节点 nodes 和边 edges 字段 的 JSON 数据
            const 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"
                    }
                ]
            };


7. 定制边样式

可以使用 attrs 对象来配置边的样式

在这里插入图片描述

<template>
    <div>
        <button @click="enlarge">缩小</button>
        <button @click="narrow">缩小</button>
        <button @click="move">平移</button>
        <div id="container" />
    </div>
</template>
<script>
import { Graph } from "@antv/x6";
export default {
    name: "",
    data() {
        return {
            graph: {}
        };
    },
    mounted() {
        this.initGraph();
    },
    methods: {
        initGraph() {
            // 1. 节点 nodes 和边 edges 字段 的 JSON 数据
            const 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",
                        attrs: {
                            line: {
                                stroke: "orange"
                            }
                        }
                    }
                ]
            };

            // 2. 渲染画布
            this.graph = new Graph({
                container: document.getElementById("container"),
                width: 800,
                height: 600,
                background: {
                    color: "#fffbe6" // 设置画布背景颜色
                },
                grid: {
                    size: 10, // 网格大小 10px
                    visible: true // 渲染网格背景
                }
            });

            // 3. 渲染我们的节点和边
            this.graph.fromJSON(data);
        },
        enlarge() {
            this.graph.zoom(-0.5);
        },
        narrow() {
            this.graph.zoom(0.5);
        },
        move() {
            this.graph.translate(80, 40);
        }
    }
};
</script>



三、场景实例

1. ER 图

在这里插入图片描述

代码结构：

<template>
    <div id="container" />
</template>
<script>
import { Graph, Cell, Shape } from "@antv/x6";
import dataEr from "./er.json";
export default {
    name: "",
    data() {
        return {};
    },
    mounted() {
        this.initGraph();
    },
    methods: {
        initGraph() {
            const LINE_HEIGHT = 24;
            const NODE_WIDTH = 150;

            Graph.registerPortLayout(
                "erPortPosition",
                portsPositionArgs => {
                    return portsPositionArgs.map((_, index) => {
                        return {
                            position: {
                                x: 0,
                                y: (index + 1) * LINE_HEIGHT
                            },
                            angle: 0
                        };
                    });
                },
                true
            );

            Graph.registerNode(
                "er-rect",
                {
                    inherit: "rect",
                    markup: [
                        {
                            tagName: "rect",
                            selector: "body"
                        },
                        {
                            tagName: "text",
                            selector: "label"
                        }
                    ],
                    attrs: {
                        rect: {
                            strokeWidth: 1,
                            stroke: "#5F95FF",
                            fill: "#5F95FF"
                        },
                        label: {
                            fontWeight: "bold",
                            fill: "#ffffff",
                            fontSize: 12
                        }
                    },
                    ports: {
                        groups: {
                            list: {
                                markup: [
                                    {
                                        tagName: "rect",
                                        selector: "portBody"
                                    },
                                    {
                                        tagName: "text",
                                        selector: "portNameLabel"
                                    },
                                    {
                                        tagName: "text",
                                        selector: "portTypeLabel"
                                    }
                                ],
                                attrs: {
                                    portBody: {
                                        width: NODE_WIDTH,
                                        height: LINE_HEIGHT,
                                        strokeWidth: 1,
                                        stroke: "#5F95FF",
                                        fill: "#EFF4FF",
                                        magnet: true
                                    },
                                    portNameLabel: {
                                        ref: "portBody",
                                        refX: 6,
                                        refY: 6,
                                        fontSize: 10
                                    },
                                    portTypeLabel: {
                                        ref: "portBody",
                                        refX: 95,
                                        refY: 6,
                                        fontSize: 10
                                    }
                                },
                                position: "erPortPosition"
                            }
                        }
                    }
                },
                true
            );

            const graph = new Graph({
                container: document.getElementById("container"),
                width: 800,
                height: 600,
                background: {
                    color: "#fffbe6" // 设置画布背景颜色
                },
                grid: {
                    size: 10, // 网格大小 10px
                    visible: true // 渲染网格背景
                },
                connecting: {
                    router: {
                        name: "er",
                        args: {
                            offset: 25,
                            direction: "H"
                        }
                    },
                    createEdge() {
                        return new Shape.Edge({
                            attrs: {
                                line: {
                                    stroke: "#A2B1C3",
                                    strokeWidth: 2
                                }
                            }
                        });
                    }
                }
            });
            // 遍历数据
            const cells = [];
            dataEr.forEach(item => {
                if (item.shape === "edge") {
                    cells.push(graph.createEdge(item));
                } else {
                    cells.push(graph.createNode(item));
                }
            });
            graph.resetCells(cells);
            graph.zoomToFit({ padding: 10, maxScale: 1 });
        }
    }
};
</script>



四、疑难点

1. 显示不出来

⑴. 未设置画布大小
            const graph = new Graph({
                container: document.getElementById("container"),
                width: 800,
                height: 600,
                background: {
                    color: "#fffbe6" // 设置画布背景颜色
                },
                grid: {
                    size: 10, // 网格大小 10px
                    visible: true // 渲染网格背景
                },
                // ...


2. fetch

fetch 是向后端发起请求，如果 data 数据可缓存本地，可用 import 引入

import dataEr from "./er.json";

// ...

// fetch('../data/er.json')
  // .then((response) => response.json())
  // .then((data) => {
  dataEr.forEach(item => {
  
  // ...





未完待续…

后海 0_o
关注
  • 5
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 19
    评论
专栏目录
vue 使用 AntV X6 绘制流程图
weixin_46328739的博客
06-01 3423
【代码】vue 使用 AntV X6 绘制流程图。
Vue+Antv X6绘制流程图demo
07-05
在Vue项目中使用AntV X6组件库绘制流程图，需要实现以下需求： 需求1：左侧菜单中的模块可以拖拽进入画布中生成对应的流程图模块 需求2：流程图中的节点之间可以进行连线交互 需求3：点击对应的节点后可以进行操作...
antv X6
神zhi殇的博客
12-13 586
【代码】antv X6。
使用Vue+Antv-X6实现一个输送线可视化编辑器（支持拖拽、自定义连线、自定义节点等）
廖子默
06-20 767
使用Vue2+Antv-X6去实现一个类似流程编辑器的小东西，X6做的真不错，推荐大家使用
antV X6的简要使用教程
爱蹦跶的全栈大A阿
05-09 1752
在我们的日常开发工作中，我们经常需要构建复杂的交互式图表。这是一项挑战，因为我们需要处理大量的数据，同时还要保证图表的可读性和用户体验。幸运的是，有一些强大的工具可以帮助我们完成这项任务，antv x6就是其中之一。在这篇博客中，我将向你介绍如何使用antv x6构建交互式图表，并提供一些代码示例。​antv x6还允许我们创建自定义的节点。
antv x6使用记录
arron4210的博客
06-16 687
项目环境： Vue3 + vite + ts + less + Arco design。最近要用到自定义流程图， 找了很多插件，antvX6更符合场景，还有文档。
Antv X6 动态连线
热门推荐
hongtoushan的博客
07-23 1万+
antv x6的使用
AntV X6简单使用分享
qq_43577998的博客
05-20 439
是蚂蚁的一个数据可视化的工具平台。X6。
antv x6 沿边图标循环动画实现
lingliu0824的博客
10-25 1570
2.使用transition给边设置动画,利用complte方法实现循环动画。实现效果，如下图，边上存在两个图标，要求图标延边一直循环动画。1.注册一个自定义边，边上定义两个图标，并设置其初始位置。
antv x6 v2 使用笔记
huahua的博客
04-10 2459
antv x6使用的一些笔记
antv x6踩坑记录一
weixin_43777074的博客
10-26 4559
x6的配置啥的，这里就不赘诉了，可以去官网看antv x6官网地址，写得很详细，这里主要讲一下使用x6的过程中遇到的坑的问题，有的找到了解决办法，有的暂时没找到解决办法，如果哪位大佬有解决办法，愿意分享的话，十分感激！ MiniMap和Selection不能共用：这个问题我暂时没有找到解决办法。在使用小地图的时候，再在画布中框选了子节点并添加了群组节点，在群组没有收缩的时候是能够正常展示，但是群组收缩后再次打开就会导致整个页面崩溃。这里的建议是，值进行群组节点的增加，但是不建议给群组节点增加收缩功能 增加
antv x6 拖拽流程DEMO
04-26
ANTV X6拖拽流程。可自定义节点、设备，设计设备或节点的属性。 可自定义流程任何方向，可动态扩展。 后期开发可自定义任何功能。 参考官网DEMO地址：https://x6.antv.antgroup.com/examples 参考官网文档：...
antv x6 工艺路径 流程图 前端工厂工艺路径流程图绘制 源码 版本号： "@antv/x6": "^1.33.1",
10-11
对于Vue3框架的集成，AntV X6提供了与Vue3兼容的API，使得在Vue3项目中使用X6变得更加便捷。开发者可以利用组件化思想，将流程图的各个部分封装成独立的Vue组件，提高代码的可复用性和可维护性。通过响应式数据绑定...
antV-X6-demo-master.zip
04-16
在“antV-X6-demo-master.zip”压缩包中，包含了AntV X6的最新示例代码，这为我们深入理解和使用AntV X6提供了宝贵的资源。 AntV X6的核心特性在于其强大的图形绘制能力，它基于Canvas技术，能够轻松实现复杂的图形...
antv-x6-master.zip
05-17
这个压缩包主要是为了展示如何在Vue2项目中集成和使用AntV X6，它是一个强大的JavaScript图形编辑器库，用于构建可交互的数据可视化应用。 【描述】"vue2 + x6 简单dome" 描述了这个项目的核心内容，即使用Vue2框架...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1137
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 171
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 155
【代码】vue el-select的下拉树形结构。
react使用antv x6
05-19
AntV X6 是一个基于 React 的可视化库，它提供了丰富的图形绘制、交互和布局功能，可以用于绘制各种类型的图表、流程图、组织结构图等。 使用 AntV X6 绘制图形需要引入相关的组件和样式，并创建一个画布元素。以下是一个简单示例： ```jsx import React, { useEffect, useRef } from 'react'; import { Graph } from '@antv/x6'; const MyGraph = () => { const container = useRef(null); useEffect(() => { const graph = new Graph({ container: container.current, width: 600, height: 400, }); const rect = graph.addNode({ x: 100, y: 100, width: 80, height: 40, label: 'Hello', style: { fill: '#eee', stroke: '#333', strokeWidth: 1, }, }); const circle = graph.addNode({ x: 300, y: 200, width: 40, height: 40, shape: 'ellipse', label: 'World', style: { fill: '#ccc', stroke: '#666', strokeWidth: 2, }, }); graph.addEdge({ source: rect, target: circle, attrs: { line: { stroke: '#333', strokeWidth: 1, }, }, }); }, []); return <div ref={container} />; }; export default MyGraph; ``` 在上面的示例中，我们创建了一个名为 `MyGraph` 的组件，使用 `useRef` 创建了一个画布元素的引用 `container`，并在 `useEffect` 中创建了一个 `Graph` 实例并添加了两个节点和一条边。 节点的属性包括位置、大小、形状、标签和样式等，可以根据具体需要进行调整。边的属性包括起点、终点和样式等。 在实际使用中，可以根据业务需求和数据结构进行更复杂的图形绘制和交互操作。
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

后海 0_o

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值