Cytoscape.js drawing simple elements

发表于   |   分类于

Cytoscape.js

Graph theory (a.k.a. network) library for analysis and visualisation

Official site

http://js.cytoscape.org/

Setup

like most drawing library, the setup processdure is same:

  • include the libraries

    1
    <script src="http://cdn.bootcss.com/cytoscape/2.7.8/cytoscape.js"></script>

  • init with a canvas

    1
    <div id="cy"></div>

  • using a drawing config to create a cytoscape graphic.

    1
    var cy = window.cy = cytoscape(config)

HelloWorld

using the setup example in the official site, combine with what we mentioned up, we can setup a hello world page:

code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>first_cytoscape</title>
    <script src="http://cdn.bootcss.com/cytoscape/2.7.8/cytoscape.js"></script>
</head>
<body>
    <div id="cy" style="width: 800px; height: 600px; background-color: #1c94c4"></div>
    <script>
        var config = {
            container: document.getElementById('cy'),
            elements: [
                { // node n1
                    group: 'nodes', // 'nodes' for a node, 'edges' for an edge
                    data: { 
                        id: 'n1', 
                        parent: 'nparent', 
                    },
                    scratch: {
                        foo: 'bar'
                    },
                    position: {
                        x: 100,
                        y: 100
                    },
                    selected: false,                    
                    selectable: true,
                    locked: false,
                    grabbable: true,                    
                    classes: 'foo bar' 
                },
                { // node n2
                    data: { id: 'n2' },
                    renderedPosition: { x: 200, y: 200 } 
                },
                { // node n3
                    data: { id: 'n3', parent: 'nparent' },
                    position: { x: 123, y: 234 }
                },
                { // node nparent
                    data: { id: 'nparent', position: { x: 200, y: 100 } }
                },
                { // edge e1
                    data: {
                        id: 'e1',
                        source: 'n1', 
                        target: 'n2'  
                    }
                }
            ],
            layout: {
                name: 'preset'
            },
            style: [
                {
                    selector: 'node',
                    style: {
                        'content': 'data(id)'
                    }
                },
                {
                    selector: ':parent',
                    style: {
                        'background-opacity': 0.6
                    }
                }
            ]
        };
        cy = cytoscape(config);
    </script>
</body>
</html>

result

next, will only provide the changed config.

config

the config, and showed in last section, describe what(the nodes and edges) and how(styles) in the map.

  • elements, it contains the nodes and the edges

    1
    elements: []

  • layout, the layout methods, if you want to set the fixed position, using the preset:

    1
    2
    3
    layout: {
    	name: preset,
    }

  • style: a list of css-style tell cy how to render objects

    1
    style: []

config: elements

config: style