当前位置：首页 > news >正文

【图表示例】元素-组合

news 来源：原创 2025/6/20 10:58:29

https://g6.antv.antgroup.com/examples/element/combo/#circleG6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。https://g6.antv.antgroup.com/examples/element/combo/#circle

【扩展阅读】

组合总览 | G6 图可视化引擎组合(Combo) 全称为 Combination，是 G6 中的一种特殊的图元素，它可以包含节点和子组合，类似“群组”或“容器”的概念。它通常用于表示集合关系，例如一个部门包含多个员工，一个城市包含多个区域等。https://g6.antv.antgroup.com/manual/element/combo/overview#%E8%B0%83%E6%95%B4%E4%BC%98%E5%85%88%E7%BA%A7组合配置项 | G6 图可视化引擎本文介绍组合属性配置，配置位置如下：https://g6.antv.antgroup.com/manual/element/combo/build-in/base-combo

【效果图】

// https://g6.antv.antgroup.com/manual/element/combo/overview
// https://g6.antv.antgroup.com/manual/element/combo/build-in/base-combo#type// https://g6.antv.antgroup.com/api/data#combodata
// interface ComboData {
//   id: string; // 组合 ID
//   type?: string; // 组合类型
//   data?: Record<string, any>; // 组合数据
//   style?: Record<string, any>; // 组合样式
//   states?: string[]; // 组合初始状态
//   combo?: string; // 父组合 ID
// }import { Graph } from "@antv/g6";const data = {nodes: [{ id: 'node1', combo: 'combo1', style: { x: 250, y: 150 } },{ id: 'node2', combo: 'combo1', style: { x: 350, y: 150 } },{ id: 'node3', combo: 'combo2', style: { x: 250, y: 300 } },],edges: [],combos: [{ id: 'combo1', combo: 'combo2', type: 'rect', data: { label: 'combo1' } },{ id: 'combo2', data: { label: 'combo2 is bigger' } },]
}const graph = new Graph({container: 'container',data,node: {style: {labelText: (d) => d.id,}},combo: {type: (d) => d.type || 'circle',style: {collapsedFill: '#1783FF', // 填充色collapsedStroke: '#000', // 描边色collapsedLineWidth: 2, // 描边宽度labelText: (d) => d.data.label,labelPlacement: 'bottom',},},behaviors: ['drag-element', 'collapse-expand']
})graph.render()

项目的创建参考 G6 详细教程，注意，node版本需要：required: { node: '>=18' }

详细教程 | G6 图可视化引擎本教程将引导你从头开始完成一个 G6 图表开发，并在过程中了解和学习 G6 的主要概念。https://g6.antv.antgroup.com/manual/getting-started/step-by-step