G6 图可视化引擎安装与配置完全指南

2026-01-21 04:43:24作者：裘晴惠Vivianne

♾ A Graph Visualization Framework in JavaScript.

项目地址：https://gitcode.com/gh_mirrors/g6/G6

项目基础介绍与编程语言

G6 是由 AntV 团队维护的一个专注于图可视化领域的JavaScript框架。它致力于简化图数据的可视化展示与分析过程，提供包括绘图、布局、交互、动画等功能，支持高度的定制化，并且集成了多种图分析能力。G6项目广泛应用于社交网络分析、组织结构图、知识图谱等多种场景。此项目主要采用TypeScript进行开发，确保了类型安全性与现代JavaScript生态的紧密集成。

关键技术和框架

G6依赖于Canvas、SVG和WebGL进行渲染，能够适应不同的应用场景。它不仅内置了丰富的节点、边和布局算法，还支持自定义元素，具有可控的交互设计、高性能的布局计算能力。此外，G6能够无缝接入React生态系统，通过React节点增强视觉表现和交互性，同时提供多套主题以适应不同视觉需求。

安装与配置步骤

准备工作

Node.js环境: 确保你的开发环境中已经安装了Node.js。推荐版本为14.x及以上。
包管理器: 使用NPM（Node Package Manager）或Yarn。如果你还没有安装它们，请先安装。

安装步骤

步骤1: 获取G6库

打开终端或命令提示符，使用以下命令安装G6：

npm install @antv/g6 --save

或者，如果你偏好使用Yarn：

yarn add @antv/g6

步骤2: 创建基本HTML文件

创建一个名为index.html的文件，用于加载G6并展示一个简单的图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>G6 示例</title>
    <!-- 引入G6 -->
    <script src="node_modules/@antv/g6/dist/g6.min.js"></script>
</head>
<body>
<div id="container" style="width: 800px; height: 600px;"></div>
<script>
    const graph = new G6.Graph({
        container: 'container',
        width: 800,
        height: 600,
        modes: {
            default: ['drag-canvas', 'drag-node']
        },
        layout: {
            type: 'radial',
            unitRadius: 60
        }
    });
    
    const data = {
        nodes: [{id: 'node1'}, {id: 'node2'}],
        edges: [{source: 'node1', target: 'node2'}]
    };
    
    graph.data(data);
    graph.render();
</script>
</body>
</html>