Перейти к содержимому

Исходный код вики Сценарии

Редактировал(а) Alexandr Fokin 2023/08/27 13:22
Последние авторы
1 |(% style="width:213px" %)Пример визуализации|(% style="width:1271px" %){{code language="html"}}<div id="documentGraph" style="height:500px">
2 </div>
3
4
5 var width = 600;
6 var height = 500;
7
8 var jsonGraphData = '{"nodes":[{"id":0,"label":"Label1","x":0,"y":0,"color":{"background":"cornflowerblue"}},{"id":1,"label":"Label2","x":0,"y":150,"color":{"background":"cornflowerblue"}},{"id":2,"label":"Label3","x":0,"y":300,"color":{"background":"red"}},{"id":3,"label":"Label4","x":0,"y":450,"color":{"background":"cornflowerblue"}},{"id":4,"label":"Label5","x":-450,"y":600,"color":{"background":"red"}},{"id":5,"label":"Label6","x":0,"y":600,"color":{"background":"greenyellow"}},{"id":6,"label":"Label7","x":-450,"y":750,"color":{"background":"greenyellow"}},{"id":7,"label":"Label8","x":0,"y":750,"color":{"background":"greenyellow"}}],"edges":[{"from":"0","to":"1"},{"from":"1","to":"2"},{"from":"2","to":"3"},{"from":"3","to":"4"},{"from":"3","to":"5"},{"from":"4","to":"6"},{"from":"4","to":"7"}]}';
9 var graphData = JSON.parse(jsonGraphData);
10
11 window.onload = function () {
12
13 // create an array with nodes
14 var nodes = graphData.nodes;
15
16 // create an array with edges
17 var edges = graphData.edges;
18
19 // create a network
20 var container = document.getElementById('documentGraph');
21 var data = {
22 nodes: nodes,
23 edges: edges
24 };
25
26 var options = {
27 physics: false,
28 edges: {
29 smooth: false
30 },
31 };
32
33 var network = new vis.Network(container, data, options);
34
35 // Set the coordinate system of Network such that it exactly
36 // matches the actual pixels of the HTML canvas on screen
37 // this must correspond with the width and height set for
38 // the networks container element.
39 network.moveTo({
40 position: { x: 0, y: 0 },
41 offset: { x: -width / 2, y: -height / 2 },
42 scale: 1,
43 })
44
45 }; {{/code}}
46 |(% style="width:213px" %) |(% style="width:1271px" %)
47 |(% style="width:213px" %) |(% style="width:1271px" %)
48
49