ウェブサイトのフロントエンドでグラフアルゴリズムの結果を可視化するために、いくつかのコンポーネントライブラリを探しましたが、最終的に満足できたのはアリババの antv がオープンソースで提供している G6 です。ソーシャルネットワークグラフやタンパク質相互作用ネットワークの効果が非常に良好です。以下に使用方法を簡単に紹介します。
1. インストール＆引用#
Github：https://github.com/antvis/G6
G6 はグラフ可視化エンジンです。グラフの描画、レイアウト、分析、インタラクション、アニメーションなど、グラフ可視化の基本的な機能を提供します。関係を透明でシンプルにし、ユーザーが関係データのインサイトを得られるようにすることを目的としています。G6 を基に、ユーザーは自分のグラフ分析またはグラフ編集アプリを迅速に構築できます。
1.1 プロジェクトで NPM パッケージを使用する#
ステップ 1: コマンドラインでプロジェクトディレクトリにて以下のコマンドを実行します：
npm install --save @antv/g6
ステップ 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 をマウントします：
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関係グラフの例</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>
4. レンダリング効果#
最初の画像は上記のサンプルコードのレンダリング結果で、2 番目の画像は私のグラフアルゴリズムのクエリ結果のレンダリング効果です。
単純なグラフをレンダリングするだけなら、上記のコードで十分です。より複雑なものについては、公式ドキュメントを学ぶ必要があります。