'visjs 예제'에 해당되는 글 1건

  1. 2017.01.04 visjs 예제
카테고리 없음2017. 1. 4. 15:13

visjs 예제

반응형
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
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" />
        <style type="text/css">
          body {
              font: 10pt sans;
          }
          #network {
              width: 100%;
              height: 600px;
              background: white;
              border: 1px solid lightgray;
          }
      </style>
        <script type="text/javascript">
            function main() {
                var graph = {
                    nodes: new vis.DataSet([
                      {"id": "0", "label": "Parent", "level": 0}, 
                      
                      {"id": "0.1", "label": "Child", "level": 1},
                      {"id": "0.2", "label": "Child", "level": 1},
                      
                      {"id": "0.1.1", "label": "Grand Child", "level": 2},
                      {"id": "0.2.1", "label": "Grand Child", "level": 2},
                      {"id": "0.2.2", "label": "Grand Child", "level": 2},
                      {"id": "0.2.3", "label": "Grand Child", "level": 2},
                      
                      {"id": "0.2.2.1", "label": "Grand Grand Child", "level": 3},
                      {"id": "0.2.2.2", "label": "Grand Grand Child", "level": 3},
                      {"id": "0.2.2.3", "label": "Grand Grand Child", "level": 3}
                    ]),
                    edges: new vis.DataSet([
                      {"from": "0", "to": "0.1"},
                      {"from": "0", "to": "0.2"},
                      
                      {"from": "0.1", "to": "0.1.1"},
                      
                      {"from": "0.2", "to": "0.2.1"},
                      {"from": "0.2", "to": "0.2.2"},
                      {"from": "0.2", "to": "0.2.3"},
                      
                      {"from": "0.2.2", "to": "0.2.2.1"},
                      {"from": "0.2.2", "to": "0.2.2.2"},
                      {"from": "0.2.2", "to": "0.2.2.3"},
                    ])
                };
                
                var options = {
                  nodes: {
                    borderWidth: 1,
                    borderWidthSelected: 1,
                    shape: "box",
                    color: {
                      border: 'lightgray',
                      background: 'white',
                      highlight: {
                        border: 'lightgray',
                        background: 'lightblue'
                      },
                      hover: {
                        border: 'lightgray',
                        background: 'lightblue'
                      }
                    }
                  },
                  edges: {
                    smooth: {
                      type: 'cubicBezier',
                      forceDirection: 'vertical',
                      roundness: 1
                    },
                    color: 'lightgray'
                  },
                  layout: {
                    hierarchical: {
                      direction: 'UD',
                      nodeSpacing: 150
                    }
                  },
                  interaction: {dragNodes :false},
                  physics:false
                  };
                var network = new vis.Network(document.getElementById("network"), graph, options);
            }
        </script>
    </head>
    <body onload="main();">
        <div id="network"></div>
    </body>
</html>
cs


Posted by 1010

티스토리툴바