引言

最近设计了一些图节点的渲染，比如后端使用neo4j存储了很多图形化的数据，然后传来给前端要求渲染，那么我们该如何以图形的方式来渲染出来，并提供一个友好的交互功能呢？经过我的一番bing，发现了一个很好的渲染引擎----Antv G6

介绍

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。

效果如下：且节点等可自定义或是拖拽等操作。

安装和配置

npm install --save @antv/g6

        

          
        
        
        

          

          AI 代码解读
        
      
      

如果我们使用的是工程类项目，我们可以在对应的工程中使用如下命令完成配置。

import G6 from '@antv/g6';

        

          
        
        
        

          

          AI 代码解读
        
      
      

而如果我们使用原生配置，我们只需要做出如下引入即可:

<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>

        

          
        
        
        

          

          AI 代码解读
        
      
      

使用

我们在项目中创建一个如下的div:

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

然后我们可以定义如下的数据:

复制一下官网的数据；

const data = {
            // 点集
            nodes: [
                {
                id: 'node1', // String，该节点存在则必须，节点的唯一标识
                x: 100, // Number，可选，节点位置的 x 值
                y: 200, // Number，可选，节点位置的 y 值
                },
                {
                id: 'node2', // String，该节点存在则必须，节点的唯一标识
                x: 300, // Number，可选，节点位置的 x 值
                y: 200, // Number，可选，节点位置的 y 值
                },
            ],
            // 边集
            edges: [
                {
                source: 'node1', // String，必须，起始点 id
                target: 'node2', // String，必须，目标点 id
                },
            ],
            };
            const graph = new G6.Graph({
                container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
                width: 800, // Number，必须，图的宽度
                height: 500, // Number，必须，图的高度
            });

        

          
        
        
        

          

          AI 代码解读
        
      
      

最后我们只需要渲染上去就可以了。

            graph.data(data); // 读取 Step 2 中的数据源到图上
            graph.render(); // 渲染图

        

          
        
        
        

          

          AI 代码解读
        
      
      

效果如下: