Cytoscape.js | インタラクティブなグラフ描画とネットワーク可視化 | 複数の実例で理解するJavaScriptライブラリ解説

INDEX

Cytoscape.jsについての解説
1. Circleレイアウトの例
2. Cytoscape.jsの公式サイト

Cytoscape.jsについての解説

Cytoscape.jsは、ネットワークデータを視覚化するためのJavaScriptライブラリです。ネットワーク（グラフ）をノードとエッジの関係で表し、さまざまなレイアウトやスタイルを適用して描画することができます。

Circleレイアウトの例

実行例

HTMLとJavaScriptコード


// Circleレイアウトを使用したCytoscape.jsのコード例
<div id="cy-circle"></div>

<script>
var cyCircle = cytoscape({
    container: document.getElementById('cy-circle'), // Circleレイアウトを描画するdivを指定
    elements: [ // ノードとエッジのデータを定義
        { data: { id: 'a' } },
        { data: { id: 'b' } },
        { data: { id: 'c' } },
        { data: { id: 'd' } },
        { data: { id: 'e' } },
        { data: { id: 'f' } },
        { data: { source: 'a', target: 'b' } },
        { data: { source: 'b', target: 'c' } },
        { data: { source: 'c', target: 'd' } },
        { data: { source: 'd', target: 'e' } },
        { data: { source: 'e', target: 'f' } },
        { data: { source: 'f', target: 'a' } }
    ],
    layout: {
        name: 'circle' // Circleレイアウトを適用
    }
});
</script>