To visualize the results of graph algorithms on the website front end, I tried to find some component libraries, and I was ultimately quite satisfied with AntV's open-source G6. Whether it's a social network graph or a protein interaction network, the effects are very good. Below, I will briefly introduce how to use it.
1. Installation & Reference#
Github: https://github.com/antvis/G6
G6 is a graph visualization engine. It provides basic capabilities for graph drawing, layout, analysis, interaction, animation, and more. It aims to make relationships transparent and simple, allowing users to gain insights from relational data. Based on G6, users can quickly build their own graph analysis or graph editing applications.
1.1 Using NPM Package in the Project#
Step 1: Execute the following command in the project directory using the command line:
npm install --save @antv/g6
Step 2: Import G6 in the required JS file:
import G6 from '@antv/g6';
1.2 Using CDN Reference in HTML#
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script>
2. Simple Example#
After importing the G6 library, you need to create a div to bind with the rendered result.
<div id="mountNode" style="width: 100%; height: 100%;"></div>
Then, define a data object in JS, which should contain lists of nodes and edges, in the following format:
const data = {
nodes: [
{
id: '0',
label: '0',
},
{
id: '1',
label: '1',
}
],
edges: [
{
source: '0',
target: '1',
}
]
}
Of course, this is just the simplest example of graph data format; you can also add other information, such as the x and y coordinates of the nodes.
Next, create a graph object, specify some styles, and most importantly, mount the id of the div created in the first step:
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();
Finally, pass in the code and render it.
graph.data(data);
graph.render();
3. Complete Code#
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',
},
],
};
// Create graph
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>
4. Rendering Effects#
The first image is the rendering result of the example code above, and the second image is the rendering effect of the query results from my graph algorithm.
If you only want to render a simple graph, the code above is completely sufficient. For more complex scenarios, you will need to study the official documentation.