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.5 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  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. <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></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>