g6 中的nodes x g6是啥

转载

mob64ca13f6035c 2024-02-27 22:56:56

文章标签 g6 中的nodes x javascript vue.js 前端数据 文章分类 架构后端开发

G6 是一个图可视化引擎

一、在项目中使用 NPM 包引入

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

npm install --save @antv/g6

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

import G6 from '@antv/g6';

二、绘制案例

Step 1 创建容器

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

// 挂载节点
<template>
  <div id="mountNode"></div>
</template>

Step 2 数据准备

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

// options/index.ts
const data = {
    // 节点集
    nodes: [
        {
            id: 'node1', // 节点的唯一标识
            x: 100, // 节点横坐标
            y: 200, // 节点纵坐标
            label: '起始点', // 节点文本
            size: 50, // 节点大小
            type: 'circle', //指定节点类型，内置节点类型名称或自定义节点的名称。默认为 'circle'
            // 指定边连入节点的连接点的位置（相对于该节点而言），可以为空。
            // 例如: [0, 0]，代表节点左上角的锚点，[1, 1],代表节点右下角的锚点
            anchorPoints: [],	
            //节点的样式属性
            style: {    
                fill: '#00FFFF', // 节点填充色
                stroke: '#FFFF00',  // 节点的描边颜色
                lineWidth: 5,       // 描边宽度 
                // ... 其他属性
            }, 
            //	文本配置项
            labelCfg: {
                position: 'bottom', // 文本相对于节点的位置
                offset: 10, // 文本的偏移
                style: {    // 标签的样式属性。
                  fill: 'red', // 文本颜色
                },
              },
        },
        {
            id: 'node2',
            x: 300,
            y: 200,
            label: '目标点',
        },
    ],
    // 边集
    edges: [
        // 表示一条从 node1 节点连接到 node2 节点的边
        {
            source: 'node1', // 起始点 id
            target: 'node2', // 目标点 id
            label: '我是连线', // 边的文本
            style: {
                stroke: '#000000',
                lineWidth: 5,
                // ... 其他样式属性
              },
        },
    ],
};

export default data

Step 3 图实例化

图实例化时，至少需要为图设置容器、宽、高：

<script>
  const graph = new G6.Graph({
    container: 'mountNode', // 指定挂载容器
    width: 800, // 图的宽度
    height: 500, // 图的高度
  });
</script>

Step 4 图的渲染

数据的加载和图的渲染 是两个步骤，可以分开进行。

<script>
  graph.data(data); // 加载数据
  graph.render(); // 渲染
</script>

Step 5 绘制结果

调用 graph.render() 方法之后，G6 引擎会根据加载的数据进行图的绘制。结果如下：

g6 中的nodes x g6是啥_数据

完整 vue 文件

<template>
  <div id="mountNode"></div>
</template>

<script setup lang="ts">
import { defineComponent, onMounted } from 'vue'
import G6, { GraphData, TreeGraphData } from "@antv/g6";

import data from './options/index'

onMounted(() => {
  g6(data)
})

const g6 = (data: GraphData | TreeGraphData | undefined) => {
  // 图实例化，至少需要为图设置挂载容器、宽、高
  const graph = new G6.Graph({
    container: 'mountNode', // 指定挂载容器
    width: 800, // 图的宽度
    height: 500, // 图的高度
    // 默认节点集
    defaultNode: {
      shape: "circle",
      size: [100],
      color: "#5B8FF9",
      style: {
        fill: "#9EC9FF",
        lineWidth: 3
      },
      labelCfg: {
        style: {
          fill: "#fff",
          fontSize: 20
        }
      }
    },
    // 默认边集
    defaultEdge: {
      style: {
        stroke: "#e2e2e2"
      }
    }
  });
  // 数据加载和图的渲染
  graph.data(data);
  graph.render();
}


</script>

<style lang="scss" scoped>
</style>

三、真实数据加载

上文中，我们使用了仅含有两个节点和一条边的数据，直接将数据定义放在了代码中。而真实场景的数据通常是远程接口请求加载的。为了方便，我们已经给读者准备好了一份 JSON 数据文件，地址如下：
https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json

加载远程数据

通过 fetch 函数异步加载远程的数据源，并传入 G6 的图实例中：

fetch 函数允许我们发起网络请求，加载数据，而其异步的过程可以通过 async/await 进行更合理的控制。

// options/index.ts
const response = await fetch(
    'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json',
);
const data = await response.json();

export { data }

运行后，我们得到了下图结果：

g6 中的nodes x g6是啥_数据_02