G6 中的 Graph图论概念、数据模型与实例化实践【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址: https://gitcode.com/gh_mirrors/g6/G6本篇指南围绕 G6JavaScript 图可视化框架中Graph图这一核心概念展开阐述图论视角下图的数据结构定义、G6 对各类图的统一表达方式以及如何通过new Graph(options)实例化一个可交互的图实例。读完本文你将掌握 G6 图的配置项体系options / Specification、GraphData数据模型结构、render渲染流程与实例生命周期管理并能够独立搭建一个完整的图可视化应用。什么是 Graph中文“图”在日常语境中常指图画、图像而图论与可视化中的“图”Graph则有着更精确的定位它是主体objects与关系relationships的组成。它甚至不局限于视觉——主体与关系的数据本身也可以称为图。在 G6 中“Graph”一词从三个层面被理解概念层面它是图论中的“图”一种由节点Node也称 Vertex和边Edge也称 Link构成的数据结构用于建模对象之间的两两关系视觉层面它是一幅由表示节点与边的图形元素集合组成的图形figure代码实现层面它是一个能够把数据转换为图形展示的类class即antv/g6导出的Graph类。在 G6 中Graph 对象是图的载体它包含图上的所有元素节点、边等同时挂载了图的相关操作如交互监听、元素操作、渲染等。图的类型图论分类与 G6 的统一表达图论根据结构与性质将图划分为许多不同类型常见的包括有向图Directed Graph与无向图Undirected Graph加权图Weighted Graph与无权图Unweighted Graph简单图Simple Graph与多重图Multigraph循环图Cyclic Graph与无环图Acyclic Graph连通图Connected Graph与非连通图Disconnected Graph完全图Complete Graph与非完全图Non-Complete Graph稀疏图Sparse Graph与稠密图Dense Graph……G6 提供了一种通用的图表示能够刻画上述各类图例如图类型G6 中的表达方式有向图 / 无向图由边的起点source与终点target定义方向由端点顺序决定加权图 / 无权图由边上的weight等自定义数据定义简单图 / 多重图由边的唯一性定义可通过内置 transform如process-parallel-edges处理平行边从源码看G6 的数据模型正是围绕节点与边两类实体展开在 数据规格定义 中EdgeData强制要求source与target两个端点字段从而天然支撑有向/无向图NodeData与EdgeData均支持任意自定义字段[key: string]: unknownweight等加权信息可直接挂在边数据上。多重图则可通过 process-parallel-edges 这类数据变换器进行合并与处理。应用场景图是一种通用性极强的数据结构可用于刻画多种现实场景例如社交网络用户为节点关注/好友关系为边知识图谱实体为节点语义关系为边交通网络站点为节点线路连接为边电力网络电站与变电站为节点输电线路为边。G6 为图提供了丰富的表达能力可满足不同场景的需求同时内置了大量交互与动画效果让图更加生动、直观。使用 G6 Graph实例化与渲染1. 引入库并实例化使用 G6 创建图首先需要引入antv/g6库然后实例化Graph类安装教程见 安装指南import { Graph } from antv/g6; const graph new Graph({ container: container, // 通过 DOM ID 指定容器 width: 800, height: 600, // ... 其他配置项 });Graph类接收一个实例化参数对象称之为配置项Options在可视化理论中称为Specification用于配置图的数据、元素样式、布局、交互等。⚠️注意实例化过程仅配置图的基本信息。要将图渲染到页面上还需要调用render方法。2. 实例化时发生了什么从 Graph 类源码 可以看到Graph继承自EventEmitter构造时会执行将用户传入的 options 与Graph.defaultOptions合并Object.assign({}, Graph.defaultOptions, options)建立RuntimeContext并绑定this.context.graph this当autoResize开启时监听全局resize事件。默认配置项定义如下static defaultOptions: GraphOptions { autoResize: false, theme: light, rotation: 0, zoom: 1, zoomRange: [0.01, 10], };即在未显式配置时G6 默认关闭自动尺寸调整、使用light主题、旋转角 0、缩放比例 1、缩放范围限制在[0.01, 10]。此外options.ts 中的inferOptions会在初始化时对布局配置做推断当布局类型为antv-dagre、combo-combined、compact-box、circular、concentric、dagre、fishbone、grid、indented、mds、radial、random、snake、dendrogram、mindmap等时会自动为布局设置preLayout: true以适配标签位置等预布局需求。3. 渲染render 方法render是异步方法负责把数据真正绘制到画布上。其内部流程见 graph.ts#L1196-L1214大致为触发BEFORE_RENDER生命周期事件根据是否配置layout决定走纯绘制element.draw还是预布局/后布局绘制流程并行等待绘制动画完成与autoFit自适应将rendered置为true触发AFTER_RENDER事件。因此如需在渲染完成后执行操作应使用await graph.render()或监听AFTER_RENDER事件。若只想重绘元素而不重新布局可调用graph.draw()。图配置项总览G6 的配置项体系由 GraphOptions 接口 定义它继承自CanvasOptions与ViewportOptions。下表速查核心配置项默认值以 runtime 默认配置 为准属性类型默认值描述containerstring | HTMLElement | Canvas-图容器可为 DOM 元素 ID、DOM 元素实例或 Canvas 实例width/heightnumber容器尺寸画布宽高像素未设置时自动获取容器尺寸autoFitview|center| object-自动适配策略每次执行render时生效autoResizebooleanfalse窗口大小变化时是否自动调整画布基于window.onresize实现backgroundstring-画布背景色同时作为导出图片时的背景色canvasCanvasConfig-画布配置多层渲染、renderer、devicePixelRatio 等cursorstringdefault指针样式支持任意合法 CSS cursor 值devicePixelRationumberwindow.devicePixelRatio设备像素比用于高清屏renderer(layer) IRenderer-手动指定渲染器G6 分层渲染为 background/main/label/transient 四层paddingnumber | number[]-画布内边距自适应时会根据内边距适配rotationnumber0旋转角度弧度x/ynumber-视口初始坐标zoomnumber1视口初始缩放1 表示 100%zoomRange[number, number][0.01, 10]缩放范围限制animationboolean | AnimationEffectTiming-全局动画开关与基础配置dataGraphData-图数据节点、边、组合node/edge/comboNodeOptions / EdgeOptions / ComboOptions-节点、边、组合的全局样式与状态配置themefalse |light|dark| stringlight主题支持内置主题名或自定义主题false表示不使用主题layoutLayoutOptions | LayoutOptions[]-布局配置对象为单布局数组为流水线布局behaviors(string | CustomExtensionOptions | function)[]-交互行为配置plugins(string | CustomExtensionOptions | function)[]-插件配置transforms(string | CustomExtensionOptions | function)[]-数据变换器配置渲染前处理数据不影响原始数据其中node默认类型为circleedge默认类型为linecombo默认类型为circle。更详细的参数类型说明与用法示例可参阅 配置项文档Options。配置项速查示例以下示例集中演示了视口、主题、元素、布局与交互的配置方式const graph new Graph({ container: container, width: 800, height: 600, padding: 30, autoResize: true, // 视口配置 zoom: 0.8, autoFit: view, // 主题配置 theme: dark, // 节点全局配置 node: { type: circle, style: { fill: #e6f7ff, stroke: #91d5ff, lineWidth: 1, r: 20, labelText: (d) d.id, }, state: { selected: { fill: #bae7ff, stroke: #1890ff, lineWidth: 2 }, }, }, // 边全局配置 edge: { type: line, style: { stroke: #91d5ff, lineWidth: 2, endArrow: true }, }, // 布局配置 layout: { type: force, preventOverlap: true, linkDistance: 100, animation: true, }, // 交互行为 behaviors: [drag-canvas, zoom-canvas, drag-element], // 初始数据 data: { nodes: [ { id: node1, data: { label: 节点1 } }, { id: node2, data: { label: 节点2 } }, ], edges: [{ source: node1, target: node2 }], }, });数据模型GraphDataG6 的数据模型在 spec/data.ts 中定义。GraphData是 Graph 接收的数据类型之一包含节点、边、组合的集合属性类型描述nodesNodeData[]节点数据edgesEdgeData[]边数据combosComboData[]组合Combo数据用于表达节点的层级分组一个典型的图数据示例{ nodes: [ { id: node1, combo: combo-1, style: { x: 100, y: 100 } }, { id: node2, style: { x: 200, y: 200 } } ], edges: [{ source: node1, target: node2 }], combos: [{ id: combo-1, style: { x: 100, y: 100 } }] }各数据项的关键字段NodeDataid必填唯一标识、type节点类型内置或自定义、data自定义数据可在样式映射回调中获取、style位置、大小、颜色等视觉属性、states初始状态如 selected、activated、hovered、combo所属组合 ID、children树图场景的子节点 IDEdgeDatasource必填起点节点 ID、target必填终点节点 ID、id、type、data、style颜色、线宽、箭头等、statesComboDataid必填、type、data、style、states、combo父组合 ID支持嵌套组合。样式映射中的回调函数签名示例labelText: (d) d.id其中d即当前元素的完整数据可访问data字段中的自定义属性。关于数据格式与增删改查操作可阅读 数据文档。实例属性与生命周期Graph实例提供两个只读状态属性见 graph.ts属性类型描述renderedboolean当前图实例是否已完成渲染destroyedboolean当前图实例是否已被销毁完整的生命周期为创建new Graph(options)实例化初始化创建时内部完成运行时上下文canvas、model、layout、behavior、plugin 等控制器的初始化渲染调用graph.render()完成首次渲染此时才真正绘制元素更新通过各种 API 更新数据与配置如setData、setNode、setEdge、setCombo、setLayout、setTheme、setBehaviors、setSize、setZoomRange等见 graph.ts#L130-L319销毁调用graph.destroy()依次销毁插件、交互、布局、动画、元素、数据与画布控制器移除事件监听并置destroyed true见 graph.ts#L1284-L1305。⚠️ 注意devicePixelRatio、container等属性不支持运行时更新如需修改请销毁后重新创建实例见 graph.ts#L120-L132 的注释说明。完整示例快速创建并渲染参照 快速上手文档以下示例使用fetch获取数据并完成渲染const { Graph } G6; fetch(https://assets.antv.antgroup.com/g6/graph.json) .then((res) res.json()) .then((data) { const graph new Graph({ container: container, autoFit: view, data, node: { style: { size: 10 }, palette: { field: group, color: tableau }, }, layout: { type: d3-force, manyBody: {}, x: {}, y: {} }, behaviors: [drag-canvas, zoom-canvas, drag-element], }); graph.render(); });若使用 React、Vue、Angular 等框架可参考 React 集成示例、Vue 集成示例 与 Angular 集成示例。总结G6 中的 Graph 同时具备图论数据结构、视觉图形与代码类实现三重含义是承载数据、样式、布局、交互与渲染的载体G6 通过统一的GraphData数据模型与可自定义字段覆盖有向/无向、加权/无权、简单/多重等各类图的表达new Graph(options)只完成配置必须调用render()才能真正绘制配置项体系覆盖画布、视口、数据、元素、布局、交互、插件与变换器等多个维度了解 配置项文档 与图实例生命周期是深入掌握 G6 图可视化能力的关键一步。【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址: https://gitcode.com/gh_mirrors/g6/G6创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考