概要

jsdoでcytoscape.jsを試して見た。
grid

circle

breadthfirst

concentric

random

サンプルコード

var cy = cytoscape({
    container: document.getElementById('cy'),
    style: cytoscape.stylesheet().selector('node').css({
        'content': 'data(id)',
        'background-color': 'darkorange'
    }).selector('edge').css({
        'content': 'data(id)',
        'color': 'blue'
    }),
    elements: {
        nodes: [{
            data: {
                id: 'A'
            }
        }, {
            data: {
                id: 'B'
            }
        }, {
            data: {
                id: 'C'
            }
        }, {
            data: {
                id: 'D'
            }
        }, {
            data: {
                id: 'E'
            }
        }, {
            data: {
                id: 'F'
            }
        }],
        edges: [{
            data: {
                id: 'ab', 
                source: 'A',
                target: 'B'
            }
        }, {
            data: {
                id: 'ac', 
                source: 'A', 
                target: 'C'
            }
        }, {
            data: {
                id: 'ad', 
                source: 'A',
                target: 'D'
            }
        }, {
            data: {
                id: 'be', 
                source: 'B',
                target: 'E'
            }
        }, {
            data: {
                id: 'df',
                source: 'D', 
                target: 'F'
            }
        }]
    },
    layout: {
        name: 'random',
        roots: ['A'],
        strictHierarchy: true
    }
});