antv/g6 绘制生态图-新手入门

已于 2023-07-17 15:42:23 修改
阅读量2.6k 收藏 5
点赞数 1
文章标签： vue.js javascript canva可画
于 2023-07-17 15:39:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baixue0111/article/details/131641949
版权

实现效果如下图：

 API文档：图配置 G6.Graph(cfg) | G6

参考样例：自定义树图 | G6

 坐标转换：坐标转换

一、安装 & 引用

1. 通过npm包引入

npm install --save @antv/g6

   在需要使用的文件中直接引入G6即可

import G6 from "@antv/g6"

2. 通过CDN形式引入

// version <= 3.2
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script>

// version >= 3.3
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/{$version}/dist/g6.min.js"></script>

二、数据结构如下：

const mockData = {
                id: 'g1',
                name: '我是科目我是科目我是科目我是科目我是科目我是科目目目目目',
                dataType: 'root',
                amount: 123123213123.123123,
                children: [
                    {
                        id: 'g12',
                        name: 'Deal with LONG label LONG label LONG label LONG label',
                        amount: 123123213123.123123,
                        children: [
                            {
                                id: 'g121',
                                name: 'Name3',
                                collapsed: true,
                                amount: 123123213123.123123,
                                children: [
                                    {
                                        id: 'g1211',
                                        name: 'Name4',
                                        amount: 123123213123.123123,
                                        children: [],
                                    },
                                ],
                            },
                            {
                                id: 'g122',
                                name: 'Name5',
                                collapsed: true,
                                amount: 2.34,
                                children: [
                                    {
                                        id: 'g1221',
                                        name: 'Name6',
                                        amount: 0.123123,
                                        children: [
                                            {
                                                id: 'g12211',
                                                name: 'Name6-1',
                                                amount: 123123,
                                                children: [],
                                            },
                                        ],
                                    },
                                    {
                                        id: 'g1222',
                                        name: 'Name7',
                                        amount: 123123213123.123123,
                                        children: [],
                                    },
                                ],
                            },
                            {
                                id: 'g123',
                                name: 'Name8',
                                collapsed: true,
                                amount: 12,
                                children: [
                                    {
                                        id: 'g1231',
                                        name: 'Name8-1',
                                        amount: 123123213123.123123,
                                        children: [],
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        id: 'g13',
                        name: 'Name9',
                        amount: 123123213123.123123,
                        children: [
                            {
                                id: 'g131',
                                name: 'Name10',
                                amount: 12313123.123123,
                                children: [],
                            },
                            {
                                id: 'g132',
                                name: 'Name11',
                                amount: 123123213123.123123,
                                children: [],
                            },
                        ],
                    },
                    {
                        id: 'g14',
                        name: 'Name12',
                        amount: 123123213123.123123,
                        children: [],
                    },
                ],
            };

完整代码如下：

<template>
    <div id="container"></div>
</template>
  
<script>
import G6 from '@antv/g6';

export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },
    created() { },
    mounted() {
        this.initAntv();
    },
    methods: {
        // 初始化
        initAntv() {

            //  组件props
            const props = {
                data: mockData,
                config: {
                    padding: [20, 50],
                    // defaultLevel: 3,
                    defaultZoom: 0.8,
                    modes: { default: ['zoom-canvas', 'drag-canvas'] },
                },
            };

            const container = document.getElementById('container');
            const width = container.scrollWidth;
            const height = container.scrollHeight || 500;

            // 默认配置
            const defaultConfig = {
                width,
                height,
                modes: {
                    default: ['zoom-canvas', 'drag-canvas'],
                },
                fitView: true,
                animate: true,
                minZoom: 0.5,
                maxZoom: 1.5,
                linkCenter: false,
                defaultNode: {  // 默认节点
                    type: 'flow-rect',
                },
                defaultEdge: {  // 默认边
                    type: 'cubic-horizontal',
                    style: {
                        stroke: 'rgb(93, 162, 216)',
                    },
                },
                layout: {  // layout 布局配置
                    type: 'mindmap', 
                    direction: 'V',
                    dropCap: false,
                    rankSep: 350,
                    nodeSep: 100,
                    getHeight: () => {
                        return 60;
                    },
                    // 节点横向间距的回调函数
                    getHGap: function getHGap() {
                        return 150;
                    }
                },
            };

            // 自定义节点
            const registerFn = () => {
                /**
                 * 自定义节点
                 */
                G6.registerNode(
                    'flow-rect',
                    {
                        shapeType: 'flow-rect',
                        draw(cfg, group) {
                            const {
                                name = '',
                                collapsed,
                                dataType,
                                amount,
                            } = cfg;

                            const config = {
                                basicColor: 'rgb(66, 151, 215)',  // 左边粗线的颜色
                                fontColor: 'rgb(74, 177, 241)',  // 字体颜色
                                borderColor: 'rgb(169, 217, 252)', // 边框颜色
                                bgColor: 'rgb(230, 240, 250)',  // 矩形背景色
                            };

                            const rectConfig = {
                                width: 243,
                                height: 64,
                                lineWidth: 1,
                                fontSize: 12,
                                opacity: 1,
                                fill: config.bgColor,
                                stroke: config.borderColor,
                                radius: 2,
                                cursor: 'pointer',
                            };

                            const nodeOrigin = {
                                x: -rectConfig.width / 2,
                                y: -rectConfig.height / 2,
                            };

                            const textConfig = {
                                textAlign: 'left',
                                textBaseline: 'bottom',
                            };

                            if (dataType != 'root') {
                                /* 左边的小圆点 */
                                group.addShape('circle', {
                                    attrs: {
                                        x: nodeOrigin.x - 0,
                                        y: 0,
                                        r: 6,
                                        fill: config.basicColor,
                                    },
                                    name: 'left-dot-shape',
                                });
                            }
                            // 外层矩形
                            const rect = group.addShape('rect', {
                                attrs: {
                                    x: nodeOrigin.x,
                                    y: nodeOrigin.y,
                                    ...rectConfig,
                                },
                            });

                            /* 左边的粗线 */
                            group.addShape('rect', {
                                attrs: {
                                    x: nodeOrigin.x,
                                    y: nodeOrigin.y,
                                    width: 3,
                                    height: rectConfig.height,
                                    fill: config.basicColor,
                                    radius: 1.5,
                                },
                                name: 'left-border-shape',
                            });




                            const rectBBox = rect.getBBox();

                            // 科目
                            group.addShape('text', {
                                attrs: {
                                    ...textConfig,
                                    x: 12 + nodeOrigin.x,
                                    y: 20 + nodeOrigin.y,
                                    text: name.length > 16 ? name.substr(0, 16) + '...' : name,
                                    fontSize: 12,
                                    opacity: 0.85,
                                    fill: config.fontColor,
                                    cursor: 'pointer',
                                },
                                name: 'name-shape',
                            });

                            if (amount) {
                                // 金额-矩形
                                const amountRect = group.addShape('rect', {
                                    attrs: {
                                        fill: '#fff',
                                        radius: 2,
                                        stroke: config.borderColor,
                                        cursor: 'pointer', // 需要调整
                                    },
                                    name: 'amount-container-shape',
                                })
                                // 金额
                                const amountText = group.addShape('text', {
                                    attrs: {
                                        ...textConfig,
                                        x: rectBBox.maxX - 10,
                                        y: rectBBox.maxY - 10,
                                        text: `${amount}`,
                                        fontSize: 12,
                                        textAlign: 'right',
                                        fill: '#000',
                                    },
                                    name: 'amount-text-shape',
                                });

                                const amountBBox = amountText.getBBox(); // 获取元素的包围盒
                                /* amountBBox */
                                amountRect.attr({
                                    x: rectBBox.maxX - amountBBox.width - 15,
                                    y: rectBBox.maxY - 27,
                                    width: amountBBox.width + 10,
                                    height: amountBBox.height + 10,
                                });
                            }

                            // collapse rect
                            if (cfg.children && cfg.children.length) {
                                group.addShape('circle', {
                                    attrs: {
                                        x: rectConfig.width / 2 + 8.5,
                                        y: 0,
                                        r: 8,
                                        width: 16,
                                        height: 16,
                                        stroke: 'rgb(74, 177, 241)',
                                        cursor: 'pointer',
                                        fill: '#fff',
                                    },
                                    name: 'collapse-back',
                                    modelId: cfg.id,
                                });

                                // collpase text
                                group.addShape('text', {
                                    attrs: {
                                        x: rectConfig.width / 2 + 8.5,
                                        y: 1,
                                        textAlign: 'center',
                                        textBaseline: 'middle',
                                        text: collapsed ? '+' : '-',
                                        fontSize: 16,
                                        cursor: 'pointer',
                                        fill: 'rgb(74, 177, 241)',
                                    },
                                    name: 'collapse-text',
                                    modelId: cfg.id,
                                });
                            }
                            return rect;
                        },
                        update(item) {
                            // const { level, name } = cfg;
                            // console.log("update生命周期函数中的cfg========", cfg)
                            const group = item.getContainer();
                            let mask = group.find(ele => ele.get('name') === 'mask-shape');
                            let maskLabel = group.find(ele => ele.get('name') === 'mask-label-shape');

                            group.get('children').forEach(child => {
                                if (child.get('name')?.includes('collapse')) return;
                                child.show();
                            })
                            mask?.animate({ opacity: 0 }, {
                                duration: 200,
                                callback: () => mask.hide()
                            });
                            maskLabel?.animate({ opacity: 0 }, {
                                duration: 200,
                                callback: () => maskLabel.hide()
                            });

                        },
                        setState(name, value, item) {
                            if (name === 'collapse') {
                                const group = item.getContainer();
                                const collapseText = group.find((e) => e.get('name') === 'collapse-text');
                                if (collapseText) {
                                    if (!value) {
                                        collapseText.attr({
                                            text: '-',
                                        });
                                    } else {
                                        collapseText.attr({
                                            text: '+',
                                        });
                                    }
                                }
                            }
                        },
                        getAnchorPoints() {
                            return [
                                [0, 0.5],
                                [1, 0.5],
                            ];
                        },
                    },
                    'rect',
                );
            };

            registerFn();

            const { data } = props;
            let graph = null;

            const initGraph = (data) => {
                if (!data) {
                    return;
                }
                const { onInit, config } = props;
                const tooltip = new G6.Tooltip({
                    // offsetX and offsetY include the padding of the parent container
                    offsetX: 20,
                    offsetY: 30,
                    // 允许出现 tooltip 的 item 类型
                    itemTypes: ['node'],
                    // custom the tooltip's content
                    // 自定义 tooltip 内容
                    getContent: (e) => {
                        const outDiv = document.createElement('div');
                        outDiv.style.textAlign = 'left';
                        const nodeName = e.item.getModel().name;
                        let formatedNodeName = '';
                        for (let i = 0; i < nodeName.length; i++) {
                            formatedNodeName = `${formatedNodeName}${nodeName[i]}`;
                            if (i !== 0 && i % 20 === 0) formatedNodeName = `${formatedNodeName}<br/>`;
                        }
                        outDiv.innerHTML = `${formatedNodeName}`;
                        return outDiv;
                    },
                    shouldBegin: (e) => {
                        // if (e.target.get('name') === 'name-shape' || e.target.get('name') === 'mask-label-shape') return true;
                        const nodeName = e.item.getModel().name;
                        if (nodeName.length > 24) {
                            return true
                        } else {
                            return false;
                        }
                    },
                });
                graph = new G6.TreeGraph({
                    container: 'container',
                    ...defaultConfig,
                    ...config,
                    plugins: [tooltip],
                });
                if (typeof onInit === 'function') {
                    onInit(graph);
                }
                graph.data(data);
                graph.render();

                const handleCollapse = (e) => {
                    const target = e.target;
                    const id = target.get('modelId');
                    const item = graph.findById(id);
                    const nodeModel = item.getModel();
                    nodeModel.collapsed = !nodeModel.collapsed;
                    graph.layout();
                    graph.setItemState(item, 'collapse', nodeModel.collapsed);
                };
                graph.on('collapse-text:click', (e) => {
                    handleCollapse(e);
                });
                graph.on('collapse-back:click', (e) => {
                    handleCollapse(e);
                });
            };

            initGraph(data);

            if (typeof window !== 'undefined')
                window.onresize = () => {
                    if (!graph || graph.get('destroyed')) return;
                    if (!container || !container.scrollWidth || !container.scrollHeight) return;
                    graph.changeSize(container.scrollWidth, container.scrollHeight);
                };

        }
    }
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

问题：

当我们按照以上操作绘制完图之后，发现画布中的内容并非居中展示，设置 fitView: true 并没有起作用，有可能是因为布局原因，有定位的设置可能会影响画布的中心坐标，有了解决问题的思路 ，我们就开始着手试试把。增加以下代码：

// 设置画布居中
setCenetr(graph) {
    const con_width = document.getElementById("container").clientWidth;
    const con_Height = document.getElementById("container").clientHeight;

    // 重新计算画布中心的坐标
    const centerX = con_width / 2 - 60;
    const centerY = con_Height / 2 - 60;
    // 以 x, y 为坐标中心，进行缩放
    graph.zoomTo(0.7, {
        x: centerX,
        y: centerY
    })
}

以上方法需在 graph.render() 之前执行。

友情提示：新手小白入门的话最好是先找个和自己需求相似案例看看，然后开始照猫画虎，画着画着慢慢就能就看明白了，当然 大佬略过哈 ~  多看看官方的文档，写的很详细。

请叫我阿白_ha
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vuex和antv/g6实现在线绘制分析流程图功能演示Demo
09-07
基于vue框架实现流程图绘制在项目中实际是一个复杂的应用，但是因为有很多算法都是和项目中业务相关不一定符合其他小伙伴的实际应用情况并且项目存在保密机制不方便全部分享出来，所以本Demo中仅抽取最基础的部分...
Vue3.x+AntV G6+Element Plus
12-04
一个开箱即用的基于Vue3使用AntV G6绘制图谱的项目，项目中包含两个demo，其一：图谱可以实现自适应窗口大小；其二：图谱自适应DOM元素大小。帮助你更好的理解并在Vue3.x中使用AntV G6库，有助于初学者快速上手
antv/g6 节点、及自定义节点
study_way的博客
11-01 4778
若内置节点无法满足需求，还可以通过 G6.registerNode(typeName: string, nodeDefinition: object, extendedNodeType?: string) 进行自定义节点，方便开发更加定制化的节点，包括含有复杂图形的节点、复杂交互的节点、带有动画的节点等。// 计算五角星每个角的弧度i < n;i++) {// 节点的大小attrs: {
Antv G6入门之旅--combo图
Blog of Leviash
10-23 2670
G6是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight，为数据科学家和开发者提供了一种全新的方式来展示和探索数据。我曾经使用过 ECharts 与 D3.js，当我遇见 AntV G6 后，突感惊喜，其内含丰富的效果与强大的功能。相对于 ECharts，AntV G6 的图表种类更多，也更灵活，更容易上手；而相对于 D3.js，AntV G6 的 API 更为简单易用，适合快速上手。
G6初探g6 初始化layout的配置属性都有哪些
最新发布
偏执的小男孩儿
05-16 500
G6初探g6 初始化layout的配置属性都有哪些
antv/g6基本使用教程
码农键盘上的梦
12-14 6318
在项目中引入 G6,需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为。引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（在项目中引入 G6 有以下两种方式：npm 引入，CDN 引入。创建关系图（实例化）时，至少需要为图设置容器、宽和高。G6 在绘制时会在该容器下追加。标签，然后将图绘制在其中。
antv G6 实践踩坑，插件，时间轴，撤销回退，修改样式
qq_40453669的博客
06-01 1851
总结： 多看案例，遇到图渲染不出来的，检查语法错误，控制台不一定会报错，找不出的话就回退代码，一次不要写太多的代码才看效果。时间轴的数据格式，节点中也需要增加date属性，并且需要和时间轴date格式相同，才能用内置的筛选功能，不同的时间轴类型需要的date格式不一样，仔细查看官方文。2. 撤销回退功能：只能使用官方提供的 new G6.ToolBar来编写撤销回退功能，自己写的话很麻烦，需要监听各类事件，如果需要自定义工具栏，可以将工具栏覆盖在自定义的工具栏上。内置的方法更换不了图片，需要自定义，在。
g6学习笔记三(Graph）
vue6214的博客
02-23 4159
Graph 是 G6 图表的载体,有的 G6 节点实例操作以及事件，行为监听都在 Graph 实例上进行。Graph 的初始化通过 new 进行实例化，实例化时需要传入需要的参数。
「AntV」基于AntV G6 实现 数据血缘有序分组dag链路图排版
知无涯
01-11 5152
数据链路图是数据开发产品中的一个核心特性，也是产品核心竞争力之一。对此感兴趣的可以多花一段时间做一个专题研究，也欢迎私下找我讨论。最后希望大家都能在滴普得到成长，做出自己的杰出的作品。要相信功夫不负有心人✌。
AntV G6的安装与搭建
笑到世界都狼狈的博客
12-22 8121
项目中有遇到一个偏展示，但echarts的graph实现效果又不是很理想，所以就研究了antv G6,到目前为止支持的还可以，所以写几篇文件记录一下学习G6的过程 antv官网 首先，我在官网例子中找到了G6,感觉G6比较适合我们现在的拓扑图需求，所以就开始了一些简单的研究 官网的快速上手 1.安装与引用 <1>使用npm安装与引用 （1）在项目中使用npm包引入，需要使用如下命令安装g6 npm install --save @antv/g6 具体效果如下图所示： ..
antv-g6.chm
07-25
angular antv-g6官网的帮助文档本地缓存做成的离线文档，可以在不联网的状态下查看帮助手册，方便内网的同事们做参考手册，基于g6-3.x版本
antv-g6-multi-edges
05-14
总结来说，AntV G6的多边缘特性是构建复杂图网络的关键，它使得数据之间的多元关系得以清晰展现。通过自定义Edge类型和EdgeGroup，我们可以自由地设计和组织图形结构，以适应各种应用场景。掌握这一特性，对于提升...
antv/x6封装vue2.0源码
05-13
附带增删改连线拖拽生成功能撤销保存放大缩小等等
antv G6在vue项目中的实践总结
小易不止于搬砖的博客
09-08 6694
antvG6树图 自定义节点、边；数据更新后重新渲染以及tooltip的使用
ANTV/G6 绘制网络拓扑图
taoyulei11的博客
09-21 4294
用antv/g6绘制了网络
使用antv/g6在Vue中实现流程图
ssy001128的博客
06-30 3506
vue 中使用antv/g6插件查出流程图，前面还用过bpmn插件，效果没有这个好
vue中使用antv/g6绘制树图
chelly_z的博客
09-23 582
vue使用G6绘制树状图
会用这些的api，轻松绘制流程图（antv/g6流程图入门）
qq_35094120的博客
01-30 4699
g6的api使用常用graph属性和方法graph属性graph方法getPointByClient(clientX, clientY)getZoom()zoomTo(toRatio, center)get(key)find(type, fn)removeItem(item, stack)update(node/edge,nodeModel/edgeModel)updateItem(item, model, stack)destroy()setAutoPaint(auto)paint()setItemSta
将antv g6生成的图片URL转成blob,再将blob转成file，最后将转成的file作为接口参数传给后端
weixin_61977924的博客
11-02 119
/antv g6 API生成的图片URL。// 将blob转file。
怎么用npm安装@antv/g6-core/lib/item/item、@antv/util、graphlib/lib/json 和 lodash/_initCloneByTag。
06-03
你可以使用以下命令来安装这些依赖项： ``` npm install @antv/g6-core @antv/util graphlib lodash ``` 这将安装 @antv/g6-core、@antv/util、graphlib 和 lodash 包，这些依赖项中都包含你所需要的子模块（如 @antv/g6-core/lib/item/item 和 graphlib/lib/json）。如果你只需要安装特定的子模块，可以使用以下命令： ``` npm install @antv/g6-core/lib/item/item @antv/util graphlib/lib/json lodash/_initCloneByTag ``` 这将只安装指定的子模块，而不是整个包。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值