vis.js - Сценарии

Page / - Изменено Alexandr Fokin в 2023/08/27 13:22

Сценарии

Изменено Alexandr Fokin

в 2023/08/27 13:22

Оглавление

Пример визуализации	<div id="documentGraph" style="height:500px"> </div> var width = 600; var height = 500; 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"}]}'; var graphData = JSON.parse(jsonGraphData); window.onload = function () { // create an array with nodes var nodes = graphData.nodes; // create an array with edges var edges = graphData.edges; // create a network var container = document.getElementById('documentGraph'); var data = { nodes: nodes, edges: edges }; var options = { physics: false, edges: { smooth: false }, }; var network = new vis.Network(container, data, options); // Set the coordinate system of Network such that it exactly // matches the actual pixels of the HTML canvas on screen // this must correspond with the width and height set for // the networks container element. network.moveTo({ position: { x: 0, y: 0 }, offset: { x: -width / 2, y: -height / 2 }, scale: 1, }) };