Seomal/sigmajs.html at master · web-n/Seomal · GitHub

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/sigma.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/plugins/sigma.plugins.animate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/plugins/sigma.layout.noverlap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/plugins/sigma.layout.forceAtlas2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sigma.js/1.2.1/plugins/sigma.plugins.dragNodes.min.js"></script>
</head>

<body>
    <style>
        #graph-container {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            position: absolute;
        }
    </style>
    <div id="graph-container"></div>
    <script>
        var i,
            s,
            N = 100,
            E = 500,
            g = {
                nodes: [],
                edges: []
            };

        function fromCy(){
            fetch('data/data.json')
            .then(function (raw) {
                return raw.json();
            })
            .then(function (result) {
                for (var name in result) {
                    var node = result[name].data;
                    if (node.label) {
                        g.nodes.push({
                            id: node.id,
                            label: node.label,
                            x: Math.random(),
                            y: Math.random(),
                            size: Math.random(),
                            color: '#666'
                        });
                    } else {
                        g.edges.push({
                            id: node.id,
                            source: node.source,
                            target: node.target,
                            size: Math.random(),
                            color: '#cc'
                        });
                    }
                }

                s = new sigma({
                    graph: g,
                    container: 'graph-container',
                    settings: {
                        minNodeSize: 3,
                        maxNodeSize: 20
                    }
                });
                s.bind('clickNode', function (e) {
                    var data = {
                        nodes:s.graph.nodes(),
                        edges:s.graph.edges()
                    }
                    console.log(JSON.stringify(data));
                });
                var dragListener = sigma.plugins.dragNodes(s, s.renderers[0]);
            })
        }

        function fromSigma(){
            fetch('data/data.sigma.json')
            .then(function (raw) {
                return raw.json();
            })
            .then(function (result) {
                s = new sigma({
                    graph: result,
                    container: 'graph-container',
                    settings: {
                        minNodeSize: 3,
                        maxNodeSize: 20
                    }
                });
                s.bind('clickNode', function (e) {
                    var data = {
                        nodes:s.graph.nodes(),
                        edges:s.graph.edges()
                    }
                    console.log(JSON.stringify(data));
                });
                // var dragListener = sigma.plugins.dragNodes(s, s.renderers[0]);
                // s.startForceAtlas2();
            })
        }

        fromSigma();
    </script>
</body>

</html>