vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

109 lines
3.1 KiB

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