G6 - 图表库的全方位指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00913/article/details/141010774

G6 - 图表库的全方位指南

G6♾ A Graph Visualization Framework in JavaScript项目地址:https://gitcode.com/gh_mirrors/g6/G6

1. 项目介绍

G6 是一个由 AntV 团队维护的可扩展图形图绘制库，专注于图表和图形的交互。它提供了丰富的图表类型以及强大的图形操作接口，适用于数据可视化和复杂的图形场景构建。

主要特性

多样化图表：内置多种图表组件，如柱状图、折线图、饼图等。
强大的交互：提供图形元素的事件监听、拖拽、缩放、旋转等多种交互能力。
自定义渲染：支持 SVG 和 WebGL 渲染方式，便于自定义图形样式。
高性能：优化了大量图形绘制性能，尤其适合大数据量的场景。

2. 项目快速启动

首先确保已安装 Node.js 和 npm，接着执行以下步骤：

安装 G6

在命令行中使用 npm 安装 G6：

npm install @antv/g6 --save

创建基本示例

创建 index.html 文件，并引入 G6 库：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>G6 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/@antv/g6@latest/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', 'zoom-canvas']
            },
            defaultNode: {
                type: 'circle',
                size: 10,
                color: '#5B8FF9'
            },
            defaultEdge: {
                type: 'polyline',
                color: '#E6E7EB'
            }
        });
        // 加载数据
        const data = {
          nodes: [
            { id: 'node1', x: 100, y: 200 },
            { id: 'node2', x: 300, y: 200 },
          ],
          edges: [
            { source: 'node1', target: 'node2' },
          ]
        };
        // 渲染图
        graph.data(data);
        graph.render();
    </script>
</body>
</html>

打开浏览器查看效果，你将看到一个简单的节点和边的网络图。