【前端学习】AntV G6-05-G6 使用 combo

已于 2024-08-16 15:38:12 修改
阅读量316 收藏 5
点赞数 8
分类专栏： AntV G6 文章标签： 学习
于 2024-08-14 22:42:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaowxx/article/details/141202077
版权

课程链接

【资料链接】

Combo 操作 | G6 (antgroup.com)

内置 Combo | G6 (antgroup.com) 矩形

内置 Combo | G6 (antgroup.com) 圆形

Combo 复合布局 ComboCombined | G6 (antgroup.com)

【例子】

部分数据的console.log

注：以下代码中的node与edge数据是根据B站视频里提到的部分自行拼凑的，没有100%一样

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>04</title>
    <!-- 引入 G6 -->
    <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.6.11/dist/g6.min.js"></script>
</head>

<body>
    <div id="container"></div>
    <script>
        const data = {
            nodes: [
                {
                    id: "node-0",
                    label: "node-0",
                    properties: {
                        city: "110000",
                        age: 40,
                        amount: 100,
                        wifi: "10001"
                    }
                },
                {
                    id: "node-1",
                    label: "node-1",
                    properties: {
                        city: "110000",
                        age: 22,
                        amount: 100,
                        wifi: "10001"
                    }
                },
                {
                    id: "node-2",
                    label: "node-2",
                    properties: {
                        city: "110000",
                        age: 20,
                        amount: 100,
                        wifi: "10001"
                    }
                },
                {
                    id: "node-3",
                    label: "node-3",
                    properties: {
                        city: "110000",
                        age: 30,
                        amount: 100,
                        wifi: "10001"
                    }
                },
                {
                    id: "node-4",
                    label: "node-4",
                    properties: {
                        city: "110000",
                        age: 48,
                        amount: 100,
                        wifi: "10001"
                    }
                },
                {
                    id: "node-5",
                    label: "node-5",
                    properties: {
                        city: "310000",
                        age: 32,
                        amount: 100,
                        wifi: "10001"
                    }
                },
                {
                    id: "node-6",
                    label: "node-6",
                    properties: {
                        city: "310000",
                        age: 88,
                        amount: 100,
                        wifi: "10001"
                    }
                },
                {
                    id: "node-7",
                    label: "node-7",
                    properties: {
                        city: "310000",
                        age: 46,
                        amount: 100,
                        wifi: "10001"
                    }
                },
                {
                    id: "node-8",
                    label: "node-8",
                    properties: {
                        city: "310000",
                        age: 78,
                        amount: 100,
                        wifi: "10001"
                    }
                },
                {
                    id: "node-9",
                    label: "node-9",
                    properties: {
                        city: "310000",
                        age: 32,
                        amount: 100,
                        wifi: "10001"
                    }
                },
                {
                    id: "node-10",
                    label: "node-10",
                    properties: {
                        city: "310000",
                        age: 14,
                        amount: 100,
                        wifi: "10001"
                    }
                },
                {
                    id: "node-11",
                    label: "node-11",
                    properties: {
                        city: "440300",
                        age: 23,
                        amount: 100,
                        wifi: "10001"
                    }
                },
                {
                    id: "node-12",
                    label: "node-12",
                    properties: {
                        city: "440300",
                        age: 65,
                        amount: 100,
                        wifi: "10001"
                    }
                },
                {
                    id: "node-13",
                    label: "node-13",
                    properties: {
                        city: "440300",
                        age: 74,
                        amount: 100,
                        wifi: "10001"
                    }
                },
                {
                    id: "node-14",
                    label: "node-14",
                    properties: {
                        city: "440300",
                        age: 60,
                        amount: 100,
                        wifi: "10001"
                    }
                },
                {
                    id: "node-15",
                    label: "node-15",
                    properties: {
                        city: "440300",
                        age: 75,
                        amount: 100,
                        wifi: "10001"
                    }
                },
                {
                    id: "node-16",
                    label: "node-16",
                    properties: {
                        city: "440300",
                        age: 55,
                        amount: 100,
                        wifi: "10001"
                    }
                },
            ],
            edges: [
                {
                    id: "edge-0",
                    source: "node-0",
                    target: "node-1"
                },
                {
                    id: "edge-1",
                    source: "node-0",
                    target: "node-2"
                },
                {
                    id: "edge-2",
                    source: "node-0",
                    target: "node-3"
                },
                {
                    id: "edge-3",
                    source: "node-0",
                    target: "node-4"
                },
                {
                    id: "edge-4",
                    source: "node-1",
                    target: "node-2"
                },
                {
                    id: "edge-5",
                    source: "node-0",
                    target: "node-5"
                },
                {
                    id: "edge-6",
                    source: "node-5",
                    target: "node-6"
                },
                {
                    id: "edge-7",
                    source: "node-6",
                    target: "node-7"
                },
                {
                    id: "edge-8",
                    source: "node-7",
                    target: "node-8"
                },
                {
                    id: "edge-9",
                    source: "node-8",
                    target: "node-9"
                },
                {
                    id: "edge-10",
                    source: "node-9",
                    target: "node-10"
                },
                {
                    id: "edge-11",
                    source: "node-10",
                    target: "node-5"
                },
                {
                    id: "edge-12",
                    source: "node-6",
                    target: "node-9"
                },
                {
                    id: "edge-13",
                    source: "node-5",
                    target: "node-11"
                },
                {
                    id: "edge-14",
                    source: "node-0",
                    target: "node-11"
                },
                {
                    id: "edge-15",
                    source: "node-11",
                    target: "node-12"
                },
                {
                    id: "edge-16",
                    source: "node-12",
                    target: "node-13"
                },
                {
                    id: "edge-17",
                    source: "node-13",
                    target: "node-14"
                },
                {
                    id: "edge-18",
                    source: "node-14",
                    target: "node-15"
                },
                {
                    id: "edge-19",
                    source: "node-15",
                    target: "node-12"
                },
                {
                    id: "edge-20",
                    source: "node-15",
                    target: "node-13"
                },
                {
                    id: "edge-21",
                    source: "node-5",
                    target: "node-16"
                },
            ],
            combos: []
        }

        const cities = ['110000', '310000', '440300']
        const childNodeCountMap = {}

        // 为每个node节点设置comboId
        data.nodes.forEach(node => {
            if (node.properties.age < 25) {
                node.comboId = `combo-${node.properties.city}-25`;
            } else if (node.properties.age < 35) {
                node.comboId = `combo-${node.properties.city}-35`;
            } else {
                node.comboId = `combo-${node.properties.city}`;
            }
            childNodeCountMap[node.comboId] = childNodeCountMap[node.comboId] || 0
            childNodeCountMap[node.comboId]++;
        })

        // 增加data.combos数组内容
        cities.forEach(city => {
            data.combos.push({
                id: `combo-${city}`,
                label: `combo-${city}`
            })
            if (childNodeCountMap[`combo-${city}-25`]) {
                data.combos.push({
                    id: `combo-${city}-25`,
                    label: `combo-${city}-25`,
                    parentId: `combo-${city}`
                })
            }
            if (childNodeCountMap[`combo-${city}-35`]) {
                data.combos.push({
                    id: `combo-${city}-35`,
                    label: `combo-${city}-35`,
                    parentId: `combo-${city}`
                })

            }

        })

        // 区分 combo 样式
        const subjectColors = [
            "#5F95FF",
            "#7262FD",
            "#F6BD16",
            "#78D3F8",
            "#F6903D",
            "#008685",
            "#F09BB4",
        ]
        const colorSet = G6.Util.getColorSetsBySubjectColors(
            subjectColors, // 主题色数组
            '#fff', // 背景色
            'default', // 主题
            '#333'  // 置灰时的颜色
        )
        // console.log('colorSet',colorSet);

        // 关于颜色配置的关键部分
        const comboColorMap = {}
        data.combos.forEach((combo, i) => {
            const color = comboColorMap[combo.parentId] || colorSet[i % colorSet.length];
            comboColorMap[combo.id] = color
            combo.style = {
                stroke: color.mainStroke,
                fill: color.mainFill,
                opacity: 0.3
            }
        })
        data.nodes.forEach(node => {
            const color = comboColorMap[node.comboId]
            node.style = {
                stroke: color.mainStroke,
                fill: color.mainFill
            }
        })
        // console.log('comboColorMap',comboColorMap);        

        // 关于颜色配置的关键部分 END

        const width = document.getElementById('container').scrollWidth
        const height = document.getElementById('container').scrollHeight || 650
        const graph = new G6.Graph({
            container: 'container',
            width,
            height,
            fitView: true,
            layout: {
                // type: 'force'
                type: 'comboCombined',
                comboPadding: 50,
                center: [400, 300], // 设置画布的中心点
            },
            defaultNode: {
                labelCfg: {
                    position: 'bottom'
                }
            },
            modes: {
                default: ['zoom-canvas', 'drag-canvas',
                    'collapse-expand-combo', // 展开收起combo
                    {
                        type: 'drag-node',
                        onlyChangeComboSize: true, // true node无法被拖出combo外，无法改变结构
                    }, {
                        type: 'drag-combo',
                        onlyChangeComboSize: true, // true combo无法被拖出combo外，无法改变结构
                    }
                ]
            }
        })

        graph.data(data)
        graph.render()


        // 拓展：使用api控制展开收起combo
        // graph.on('canvas:click', e => {
        //     graph.collapseExpandCombo('combo-440300')
        // })

        // 拓展：使用api控制解散combo，注：dblclick会触发click
        graph.on('canvas:dblclick', e => {
            // graph.uncombo('combo-310000')
            graph.uncombo('combo-440300')
            graph.layout()  // 注：graph.uncombo('combo-310000') 重新layout的时候布局会往右边歪
        })
    </script>
</body>

</html>

四喜花露水
关注
专栏目录
Antv G6超详细笔记及使用案例分享
m0_73884922的博客
06-22 2961
G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。
antv g6 禁止移动_AntV 架构演进-G6 篇
weixin_39865204的博客
12-22 605
本文作者：AntV 架构师-萧庆简介G6 是一个图关系可视化引擎，起始于我们的业务需求，历经波折，每次改版其架构都有很大的变化，这些变化背后都有来自业务上的思考和我们对 G6 定位的调整，今天我们一起来回顾：G6 之前的关系可视化V1.0 关系映射V2.0 图编辑器V3.0 图分析引擎G6 发展的时间线如下：G6 之前的关系可视化早在做 G2之前我们就接触了集团内部一些关系图的项目，以安全和风控...
Antv G6入门之旅--combo图
Blog of Leviash
10-23 3249
G6是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight，为数据科学家和开发者提供了一种全新的方式来展示和探索数据。我曾经使用过 ECharts 与 D3.js，当我遇见 AntV G6 后，突感惊喜，其内含丰富的效果与强大的功能。相对于 ECharts，AntV G6 的图表种类更多，也更灵活，更容易上手；而相对于 D3.js，AntV G6 的 API 更为简单易用，适合快速上手。
antv/g6元素之combo
study_way的博客
11-04 1687
在 G6 中，“Combo” 是一种特殊的元素，用于组合和展示多个节点元素的一种方式。它通常用于表示一个组或子图，将多个相关节点组织在一起，并在图形中以单一的形状显示。之前也介绍过自定义节点、自定义边。当然也可以使用G6.registerCombo () 进行自定义扩展内置的 Combo。不过官方介绍最好使用内置rect、circle进行拓展，不建议复写 update 和 draw 方法。/*** 绘制 Combo 中的图形。不需要为默认的 label 增加图形，父类方法会自动增加 label。
antv/g6之图布局及切换布局
最新发布
study_way的博客
11-05 3072
节点间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距。g6支持使用 Dagre 布局来自动排列图中的节点，以形成层次结构。层次布局将自动排列节点和边，以形成层次结构，其中节点和边的位置由布局算法决定。当实例化图时没有指定布局方法，且数据中也不存在位置信息时，G6 将自动使用 Random 布局。Circular（环形）布局是一种图形布局算法，用于将图中的节点排列在一个环形的方式中。‘RL’：从右至左布局。方法允许你切换布局类型，并重新排列节点和边，以便在当前图表上应用新的布局。
AntV G6 自定义节点图形
kiku
01-03 7909
接上一篇 在 Vue3 中优雅使用 antV G6 的流程总结 1、本篇只使用了 G6 自定义节点中的一个 API draw，完整API 点击这里 /* * 绘制节点，包含文本 * @param {Object} cfg 节点的配置项 * @param {G.Group} group 图形分组，节点中图形对象的容器 * @return {G.Shape} 返回一个绘制的图形作为 keyShape，通过 node.get(‘keyShape’) 可以获取。 * 关于 keyShape 可参考文档 核心概
antv G6
viviliving的专栏
12-04 4751
决策树 决策树 大规模图下钻式探索 大规模图下钻式探索 知识图谱树图 知识图谱树 自定义流向图 自定义流向图 图表决策 图表决策 圣诞推文可视化 圣诞推文可视化 聚类的折叠/扩展 聚类的折叠/扩展 地铁线路图 地铁线路图 美国航线边绑定 美国迁徙图边绑定 澳大利亚大火 澳大利亚大火 紧凑树 紧凑树 至上而下的紧凑树
antv/g6 怎么按条件自定义节点颜色
weixin_45304198的博客
11-05 8159
const graph = new G6.Graph({ defaultNode: { size: 60, style: { fill: “#2db7f5”, // 节点背景色 stroke: “666”, // 节点边框颜色 lineWidth: 10, //节点宽度 strokeOpacity: 0.5, //边框透明度 }， labelCfg: { s..
antv g6 禁止移动_antV G6流程图在Vue中的使用
weixin_39820997的博客
12-22 487
原文首发于我的博客，欢迎点击查看获得更好的阅读体验~更新内容最新版本2.x版本后,可以通过npm install直接安装使用了最近我司项目中需要加入流程图制作功能，于是乎百度各种找可视化绘制拓扑图的轮子，大部分都是国外的，看文档太吃力，不过好在最终让我发现了AntV G6流程图图表库，最新版为2.0，不过编辑器在2.0版本还没有进行开源，所以只能退而求其次，使用了1.2.8版本。希望2.0版本的编...
antv g6 禁止移动_十 AntV
weixin_39542093的博客
12-22 945
← HighchartsAntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。AntV 包括以下解决方案：G2：可视化引擎G2Plot：图表库G6：图可视化引擎Graphin：基于 G6 的图分析组件F2：移动可视化方案ChartCube：AntV 图表在线制作L7：地理空间数据可视化G2 案例：折线图const data = [{ yea...
antv/G6和antv/X6
weixin_48870945的博客
07-29 3734
antv/g6、antv/X6 阶段总结
G6展示网络拓扑图，适配大数据量的方案
weixin_44277865的博客
09-29 4087
G6 comboForce布局。数据量大无法正常渲染，其他解决方案，以及解决思路。
vue中使用antvG6画分组结构图及树形关系图
蜗牛~~
06-24 7671
效果图： <div id="container" ></div> 我是对G6中提供的该图的相关函数进行了封装--下面的代码是写在公共js文件里面： export function renderMap(data,graph){ const collapseIcon = (x, y, r) => { return [ ['M', x - r, y], ['a', r, r, 0, 1, 0, r..
G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——内置节点总览
Alex
06-25 3703
G6 的内置节点包括 circle，rect，ellipse，diamond，triangle，star，image，modelRect。这些内置节点的默认样式分别如下图所示。 本文将概述 G6 中的各个内置节点类型、内置节点的通用属性、配置方法。 内置节点类型说明 下面表格中显示了内置的各类节点，同时对一些特殊的字段进行了说明： 名称描述默认示例circle圆形：- size 是单个数字，表示直径- 圆心位置对应节点的位置- color 字段默认在描边上生效- 标签文本默认在节点中央- 更多字段见 Ci
antv/g6 怎么自定义节点提示信息
weixin_45304198的博客
11-05 4634
需求中经常需要实现鼠标滑动到节点时，可以提示出想要的信息，g6是这么自定义的，我用的是angular框架，其他主流框架应该也差不多。 // 在modes 属性中 写formatText方法 modes：{ default: [“drag-node”, “zoom-canvas”, { // 以下是自定义提示的重点 type: “tooltip”, formatText: (data: any) => { // data 对应后台返回对应节点的所有数据，根
G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——Circle
Alex
06-25 2976
G6 内置了圆 Circle 节点，其默认样式如下。标签文本位于圆形中央。 使用方法 如 内置节点 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。 1 实例化图时全局配置 用户在实例化 Graph 时候可以通过 defaultNode 指定 type 为 ‘circle’，即可使用 circle 节点。 const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, def
G6 初学心得及实例应用
xxxCarpe的博客
06-14 1433
经过一段时间的学习，对G6有了初步的了解。下面我将通过一个具体的应用实例，来总结收获。 实例简介 本次实践意在通过G6构建一个关于“春季流行病”的简单图谱。通过该图谱，用户可以迅速的知晓各类疾病的症状、感染器官、就诊科室等信息。 代码分析 G6及数据导入 <div id="mountNode"></div> //调用G6 <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/buil
antv a-date-picker 限制可选时间
09-12
根据引用提供的信息，antv a-date-picker组件中有一个disableDate API可以用来限制可选的时间范围。然而，该API只能实现开始时间和结束时间之间的差值不超过3天。 另外，根据引用和引用提供的代码片段，可以看出在antv a-date-picker中可以使用moment库来进行日期的处理。通过设置current变量与选择的日期进行比较，可以实现限制可选时间的功能。 综上所述，使用antv a-date-picker组件时，可以通过设置disableDate API和使用moment库来限制可选时间的范围。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值