stmoonar·2 months ago

为了将图算法的结果在网站前端可视化，我尝试寻找一些组件库，最后让我比较满意的是蚂蚁antv开源的G6，无论是社交网络图还是蛋白质相互作用网络效果都非常好，下面我简单介绍一下使用。

1. 安装&引用

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

1.1 在项目中使用 NPM 包引入

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

 npm install --save @antv/g6

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

import G6 from '@antv/g6';

1.2 在 HTML 中使用 CDN 引入

<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script>

2. 简单示例

引入G6库之后，需要先创建一个div用于和渲染的结果绑定

<div id="mountNode" style="width: 100%; height: 100%;"></div>

然后在js里面定义一个data数据，里面要有nodes和edges列表，具体格式：

const data = {
    nodes: [
        {
            id: '0',
            label: '0',
        },
        {
            id: '1',
            label: '1',
        }
    ],
    edges: [
        {
            source: '0',
            target: '1',
        }
    ]
}

当然这只是最简单的图数据格式示例，还可以添加其它信息，比如node的x, y坐标。

接着就是创建图对象，指定一些样式以及最重要的之前第一步创建的div的id要mount过来：

const graph = new G6.Graph({
    container: 'mountNode',
    width: window.innerWidth,
    height: window.innerHeight,
    modes: {
        default: ["drag-canvas", {
            type: "drag-node",
            delegate: false
        }, {
                type: "zoom-canvas",
                sensitivity: 0.5
            }]
    },
    layout: {
        type: 'force',
        linkDistance: 240,
        nodeStrength: -30,
        edgeStrength: 0.7
    },
    defaultNode: {
        size: 54,
        style: {
            fill: '#C6E5FF',
            stroke: '#5B8FF9'
        },
        labelCfg: {
            style: {
                fill: '#000000',
                fontSize: 24
            },
            offsetX: 0,
            offsetY: 0
        }
    },
    defaultEdge: {
        style: {
            stroke: '#e2e2e2',
            linewidth: 2
        }
    }
});

graph.data(data);
graph.render();

最后传入代码并渲染

graph.data(data);
graph.render();

3. 完整代码

network.html

<!DOCTYPE html>
<html>

<head>
    <title>G6 Relationship Graph Example</title>
    <meta charset="utf-8" />
</head>

<body>
    <div id="mountNode" style="width: 100%; height: 100%;"></div>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
    <script>
        const data = {
            nodes: [
                {
                    id: '0',
                    label: '0',
                },
                {
                    id: '1',
                    label: '1',
                },
                {
                    id: '2',
                    label: '2',
                },
                {
                    id: '3',
                    label: '3',
                },
                {
                    id: '4',
                    label: '4',
                },
                {
                    id: '5',
                    label: '5',
                },
                {
                    id: '6',
                    label: '6',
                },
                {
                    id: '7',
                    label: '7',
                },
                {
                    id: '8',
                    label: '8',
                },
                {
                    id: '9',
                    label: '9',
                },
            ],
            edges: [
                {
                    source: '0',
                    target: '1',
                },
                {
                    source: '0',
                    target: '2',
                },
                {
                    source: '0',
                    target: '3',
                },
                {
                    source: '0',
                    target: '4',
                },
                {
                    source: '0',
                    target: '5',
                },
                {
                    source: '0',
                    target: '7',
                },
                {
                    source: '0',
                    target: '8',
                },
                {
                    source: '0',
                    target: '9',
                },
                {
                    source: '2',
                    target: '3',
                },
                {
                    source: '4',
                    target: '5',
                },
                {
                    source: '4',
                    target: '6',
                },
                {
                    source: '5',
                    target: '6',
                },
            ],
        };

        // 创建图
        const graph = new G6.Graph({
            container: 'mountNode',
            width: window.innerWidth,
            height: window.innerHeight,
            modes: {
                default: ["drag-canvas", {
                    type: "drag-node",
                    delegate: false
                }, {
                        type: "zoom-canvas",
                        sensitivity: 0.5
                    }]
            },
            layout: {
                type: 'force',
                linkDistance: 240,
                nodeStrength: -30,
                edgeStrength: 0.7
            },
            defaultNode: {
                size: 54,
                style: {
                    fill: '#C6E5FF',
                    stroke: '#5B8FF9'
                },
                labelCfg: {
                    style: {
                        fill: '#000000',
                        fontSize: 24
                    },
                    offsetX: 0,
                    offsetY: 0
                }
            },
            defaultEdge: {
                style: {
                    stroke: '#e2e2e2',
                    linewidth: 2
                }
            }
        });

        graph.data(data);
        graph.render();
    </script>
</body>

</html>