快速上手

    安装 & 引用

    Step 1: 使用命令行在项目目录下执行以下命令：

    Step 2: 在需要用的 G6 的 JS 文件中导入：

    2 在 HTML 中使用 CDN 引入

    注意

    • 创建关系图的 HTML 容器；
    • 数据准备；
    • 创建关系图；
    • 配置数据源，渲染。

    需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 div 标签。G6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中。

    1. <div id="mountNode"></div>

    Step 2 数据准备

    引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（nodes）和边（edges）字段，分别用数组表示：

    注意

    • nodes 数组中包含节点对象，唯一的 id 是每个节点对象中必要的属性，x、 y 用于定位；
    • edges 数组中包含边对象，source 和 target 是每条边的必要属性，分别代表了该边的起始点 id 与 目标点 id。
    • 点和边的其他属性参见链接：。
    1. const graph = new G6.Graph({
    2.   container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
    3.   width: 800, // Number，必须，图的宽度
    4. });

    Step 4 配置数据源，渲染

    完整代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    4.   <meta charset="UTF-8">
    5.   <title>Tutorial Demo</title>
    6. </head>
    7.     <body>
    8.     /* 图的画布容器 */
    9.     <div id="mountNode"></div>
    11.     /* 引入 G6 */
    12.     <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js"></script>
    14.     <script>
    15.       // 定义数据源
    16.       const data = {
    17.         // 点集
    18.         nodes: [{
    19.           id: 'node1',
    20.           x: 100,
    21.           y: 200
    22.         },{
    23.           id: 'node2',
    24.           x: 300,
    25.           y: 200
    27.         // 边集
    28.           // 表示一条从 node1 节点连接到 node2 节点的边
    29.           {
    30.             source: 'node1',
    31.             target: 'node2'
    32.           }
    33.         ]
    34.       };
    36.       // 创建 G6 图实例
    37.       const graph = new G6.Graph({
    38.         container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
    39.         // 画布宽高
    40.         width: 800,
    41.         height: 500
    42.       });
    43.       // 读取数据
    44.       graph.data(data);
    45.       // 渲染图
    46.       graph.render();
    47.     </script>
    49. </html>

    如果你想在 React 中使用 G6 ，可以参考我们提供了的 React 中使用 G6 的 [Demo]。(https://github.com/baizn/g6-in-react)

    更多关于 React 中如何使用 G6，请参考，有任何问题都可以通过页面底部的钉钉交流群和我们沟通，也非常欢迎给我们提 Issues。

    更多

    • 实例化图时的常见配置；
    • 设置元素（节点/边）属性、样式；
    • 设置布局；
    • 增加交互；
    • 增加动画；
    • 使用辅助组件。

    想了解更高阶的功能，请参见 ，G6 高级指引。