UNPKG

3.13 kBHTMLView Raw
1<!doctype html>
2<html>
3<head>
4 <title>Graph 3D camera position</title>
5
6 <style>
7 body {font: 10pt arial;}
8 td {font: 10pt arial}
9 </style>
10
11 <script type="text/javascript" src="../../dist/vis-graph3d.min.js"></script>
12
13 <script type="text/javascript">
14 var data = null;
15 var graph = null;
16
17 function custom(x, y) {
18 return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
19 }
20
21 // callback function, called when the camera position has changed
22 function onCameraPositionChange() {
23 // adjust the values of startDate and endDate
24 var pos = graph.getCameraPosition();
25 document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3));
26 document.getElementById('vertical').value = parseFloat(pos.vertical.toFixed(3));
27 document.getElementById('distance').value = parseFloat(pos.distance.toFixed(3));
28 }
29
30 // set the camera position
31 function setCameraPosition() {
32 var horizontal = parseFloat(document.getElementById('horizontal').value);
33 var vertical = parseFloat(document.getElementById('vertical').value);
34 var distance = parseFloat(document.getElementById('distance').value);
35 var pos = {
36 horizontal: horizontal,
37 vertical: vertical,
38 distance: distance
39 };
40 graph.setCameraPosition(pos);
41
42 // retrieve the camera position again, to get the applied values
43 onCameraPositionChange();
44 }
45
46 // Called when the Visualization API is loaded.
47 function drawVisualization() {
48 // Create and populate a data table.
49 data = new vis.DataSet();
50 // create some nice looking data with sin/cos
51 var steps = 50; // number of datapoints will be steps*steps
52 var axisMax = 314;
53 var axisStep = axisMax / steps;
54 for (var x = 0; x < axisMax; x+=axisStep) {
55 for (var y = 0; y < axisMax; y+=axisStep) {
56 var value = custom(x,y);
57 data.add([
58 {x:x,y:y,z:value,t:0,style:value}
59 ]);
60 }
61 }
62
63 // specify options
64 var options = {
65 width: '600px',
66 height: '600px',
67 style: 'surface',
68 showPerspective: true,
69 showGrid: true,
70 showShadow: false,
71 keepAspectRatio: true,
72 verticalRatio: 0.5
73 };
74
75 // create our graph
76 var container = document.getElementById('mygraph');
77 graph = new vis.Graph3d(container, data, options);
78
79 graph.on('cameraPositionChange', onCameraPositionChange);
80 }
81 </script>
82
83</head>
84
85<body onload="drawVisualization()">
86<h1>Graph 3d camera position</h1>
87<table>
88 <tr>
89 <td>Horizontal angle (0 to 2*pi)</td>
90 <td><input type="text" id="horizontal" value="1.0"></td>
91 </tr>
92 <tr>
93 <td>Vertical angle (0 to 0.5*pi)</td>
94 <td><input type="text" id="vertical" value="0.5"></td>
95 </tr>
96 <tr>
97 <td>Distance (0.71 to 5.0)</td>
98 <td><input type="text" id="distance" value="1.7"></td>
99 </tr>
100 <tr>
101 <td></td>
102 <td><input type="button" value="Set" onclick="setCameraPosition();"></td>
103 </tr>
104</table>
105
106<div id="mygraph"></div>
107
108<div id="info"></div>
109</body>
110</html>