【图表示例】元素-组合

最新推荐文章于 2026-06-23 15:10:44 发布

原创最新推荐文章于 2026-06-23 15:10:44 发布 · 550 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #javascript #anti-design-vue

AntV G6 专栏收录该内容

25 篇文章

订阅专栏

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