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.

731 lines
22 KiB

  1. <!DOCTYPE html>
  2. <html lang="en"><head>
  3. <meta charset="utf-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <meta name="description" content="">
  7. <meta name="author" content="">
  8. <link rel="icon" HREF="favicon.ico">
  9. <title>graph3d - vis.js - A dynamic, browser based visualization library.</title>
  10. <!-- Bootstrap core CSS -->
  11. <link href="../css/bootstrap.css" rel="stylesheet">
  12. <link href="../css/style.css" rel="stylesheet">
  13. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  14. <!--[if lt IE 9]>
  15. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  16. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  17. <![endif]-->
  18. <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
  19. <script type="text/javascript" src="../js/googleAnalytics.js"></script>
  20. <script type="text/javascript" src="../js/prettify/prettify.js"></script>
  21. <script src="../js/smooth-scroll.min.js"></script>
  22. <script language="JavaScript">
  23. smoothScroll.init();
  24. </script>
  25. <script type="text/javascript" src="../js/toggleTable.js"></script>
  26. </head>
  27. <body onload="prettyPrint();">
  28. <div class="navbar-wrapper">
  29. <div class="container">
  30. <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  31. <div class="container">
  32. <div class="navbar-header">
  33. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
  34. aria-expanded="false" aria-controls="navbar">
  35. <span class="sr-only">Toggle navigation</span>
  36. <span class="icon-bar"></span>
  37. <span class="icon-bar"></span>
  38. <span class="icon-bar"></span>
  39. </button>
  40. <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
  41. </div>
  42. <div id="navbar" class="navbar-collapse collapse">
  43. <ul class="nav navbar-nav">
  44. <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
  45. <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
  46. src="../img/external-link-icons/external-link-icon-white.png"></a>
  47. </li>
  48. <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
  49. <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
  50. <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
  51. <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
  52. <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
  53. <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
  54. </ul>
  55. </div>
  56. </div>
  57. </nav>
  58. </div>
  59. </div>
  60. <a href="https://github.com/almende/vis" class="hidden-xs hidden-sm hidden-md"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
  61. <div class="container full">
  62. <h1>Graph3d</h1>
  63. <h2 id="Overview">Overview</h2>
  64. <p>
  65. Graph3d is an interactive visualization chart to draw data in a three dimensional
  66. graph. You can freely move and zoom in the graph by dragging and scrolling in the
  67. window. Graph3d also supports animation of a graph.
  68. </p>
  69. <p>
  70. Graph3d uses <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas">HTML canvas</a>
  71. to render graphs, and can render up to a few thousands of data points smoothly.
  72. </p>
  73. <h2 id="Contents">Contents</h2>
  74. <ul>
  75. <li><a href="#Overview">Overview</a></li>
  76. <li><a href="#Loading">Loading</a></li>
  77. <li><a href="#Data_Format">Data Format</a></li>
  78. <li><a href="#Configuration_Options">Configuration Options</a></li>
  79. <li><a href="#Methods">Methods</a></li>
  80. <li><a href="#Events">Events</a></li>
  81. <li><a href="#Data_Policy">Data Policy</a></li>
  82. </ul>
  83. <h2 id="Example">Example</h2>
  84. <p>
  85. The following code shows how to create a Graph3d and provide it with data.
  86. More examples can be found in the <a href="../examples">examples</a> directory.
  87. </p>
  88. <pre class="prettyprint lang-html">
  89. &lt;!DOCTYPE HTML&gt;
  90. &lt;html&gt;
  91. &lt;head&gt;
  92. &lt;title&gt;Graph 3D demo&lt;/title&gt;
  93. &lt;style&gt;
  94. body {font: 10pt arial;}
  95. &lt;/style&gt;
  96. &lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt;
  97. &lt;script type="text/javascript"&gt;
  98. var data = null;
  99. var graph = null;
  100. function custom(x, y) {
  101. return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
  102. }
  103. // Called when the Visualization API is loaded.
  104. function drawVisualization() {
  105. // Create and populate a data table.
  106. var data = new vis.DataSet();
  107. // create some nice looking data with sin/cos
  108. var steps = 50; // number of datapoints will be steps*steps
  109. var axisMax = 314;
  110. var axisStep = axisMax / steps;
  111. for (var x = 0; x &lt; axisMax; x+=axisStep) {
  112. for (var y = 0; y &lt; axisMax; y+=axisStep) {
  113. var value = custom(x, y);
  114. data.add({
  115. x: x,
  116. y: y,
  117. z: value,
  118. style: value
  119. });
  120. }
  121. }
  122. // specify options
  123. var options = {
  124. width: '600px',
  125. height: '600px',
  126. style: 'surface',
  127. showPerspective: true,
  128. showGrid: true,
  129. showShadow: false,
  130. keepAspectRatio: true,
  131. verticalRatio: 0.5
  132. };
  133. // create a graph3d
  134. var container = document.getElementById('mygraph');
  135. graph3d = new vis.Graph3d(container, data, options);
  136. }
  137. &lt;/script&gt;
  138. &lt;/head&gt;
  139. &lt;body onload="drawVisualization();"&gt;
  140. &lt;div id="mygraph"&gt;&lt;/div&gt;
  141. &lt;/body&gt;
  142. &lt;/html&gt;
  143. </pre>
  144. <h2 id="Loading">Loading</h2>
  145. <p>
  146. The class name of the Graph3d is <code>vis.Graph3d</code>.
  147. When constructing a Graph3d, an HTML DOM container must be provided to attach
  148. the graph to. Optionally, data an options can be provided.
  149. Data is a vis <code>DataSet</code> or an <code>Array</code>, described in
  150. section <a href="#Data_Format">Data Format</a>.
  151. Options is a name-value map in the JSON format. The available options
  152. are described in section <a href="#Configuration_Options">Configuration Options</a>.
  153. </p>
  154. <pre class="prettyprint lang-js">var graph = new vis.Graph3d(container [, data] [, options]);</pre>
  155. <p>
  156. Data and options can be set or changed later on using the functions
  157. <code>Graph3d.setData(data)</code> and <code>Graph3d.setOptions(options)</code>.
  158. </p>
  159. <h2 id="Data_Format">Data Format</h2>
  160. <p>
  161. Graph3d can load data from an <code>Array</code>, a <code>DataSet</code> or a <code>DataView</code>.
  162. JSON objects are added to this DataSet by using the <code>add()</code> function.
  163. Data points must have properties <code>x</code>, <code>y</code>, and <code>z</code>,
  164. and can optionally have a property <code>style</code> and <code>filter</code>.
  165. <h3>Definition</h3>
  166. <p>
  167. The DataSet JSON objects are defined as:
  168. </p>
  169. <table class="properties">
  170. <tr>
  171. <th>Name</th>
  172. <th>Type</th>
  173. <th>Required</th>
  174. <th>Description</th>
  175. </tr>
  176. <tr>
  177. <td>x</td>
  178. <td>number</td>
  179. <td>yes</td>
  180. <td>Location on the x-axis.</td>
  181. </tr>
  182. <tr>
  183. <td>y</td>
  184. <td>number</td>
  185. <td>yes</td>
  186. <td>Location on the y-axis.</td>
  187. </tr>
  188. <tr>
  189. <td>z</td>
  190. <td>number</td>
  191. <td>yes</td>
  192. <td>Location on the z-axis.</td>
  193. </tr>
  194. <tr>
  195. <td>style</td>
  196. <td>number</td>
  197. <td>no</td>
  198. <td>The data value, required for graph styles <code>dot-color</code> and
  199. <code>dot-size</code>.
  200. </td>
  201. </tr>
  202. <tr>
  203. <td>filter</td>
  204. <td>*</td>
  205. <td>no</td>
  206. <td>Filter values used for the animation.
  207. This column may have any type, such as a number, string, or Date.</td>
  208. </tr>
  209. </table>
  210. <h2 id="Configuration_Options">Configuration Options</h2>
  211. <p>
  212. Options can be used to customize the graph. Options are defined as a JSON object.
  213. All options are optional.
  214. </p>
  215. <pre class="prettyprint lang-js">
  216. var options = {
  217. width: '100%',
  218. height: '400px',
  219. style: 'surface'
  220. };
  221. </pre>
  222. <p>
  223. The following options are available.
  224. </p>
  225. <table class="options">
  226. <tr>
  227. <th>Name</th>
  228. <th>Type</th>
  229. <th>Default</th>
  230. <th>Description</th>
  231. </tr>
  232. <tr>
  233. <td>animationInterval</td>
  234. <td>number</td>
  235. <td>1000</td>
  236. <td>The animation interval in milliseconds. This determines how fast
  237. the animation runs.</td>
  238. </tr>
  239. <tr>
  240. <td>animationPreload</td>
  241. <td>boolean</td>
  242. <td>false</td>
  243. <td>If false, the animation frames are loaded as soon as they are requested.
  244. if <code>animationPreload</code> is true, the graph will automatically load
  245. all frames in the background, resulting in a smoother animation as soon as
  246. all frames are loaded. The load progress is shown on screen.</td>
  247. </tr>
  248. <tr>
  249. <td>animationAutoStart</td>
  250. <td>boolean</td>
  251. <td>false</td>
  252. <td>If true, the animation starts playing automatically after the graph
  253. is created.</td>
  254. </tr>
  255. <tr>
  256. <td>backgroundColor</td>
  257. <td>string or Object</td>
  258. <td>'white'</td>
  259. <td>The background color for the main area of the chart.
  260. Can be either a simple HTML color string, for example: 'red' or '#00cc00',
  261. or an object with the following properties.</td>
  262. </tr>
  263. <tr>
  264. <td>backgroundColor.stroke</td>
  265. <td>string</td>
  266. <td>'gray'</td>
  267. <td>The color of the chart border, as an HTML color string.</td>
  268. </tr>
  269. <tr>
  270. <td>backgroundColor.strokeWidth</td>
  271. <td>number</td>
  272. <td>1</td>
  273. <td>The border width, in pixels.</td>
  274. </tr>
  275. <tr>
  276. <td>backgroundColor.fill</td>
  277. <td>string</td>
  278. <td>'white'</td>
  279. <td>The chart fill color, as an HTML color string.</td>
  280. </tr>
  281. <tr>
  282. <td>cameraPosition</td>
  283. <td>Object</td>
  284. <td>{horizontal:&nbsp;1.0, vertical:&nbsp;0.5, distance:&nbsp;1.7}</td>
  285. <td>Set the initial rotation and position of the camera.
  286. The object <code>cameraPosition</code> contains three parameters:
  287. <code>horizontal</code>, <code>vertical</code>, and <code>distance</code>.
  288. Parameter <code>horizontal</code> is a value in radians and can have any
  289. value (but normally in the range of 0 and 2*Pi).
  290. Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
  291. Parameter <code>distance</code> is the (normalized) distance from the
  292. camera to the center of the graph, in the range of 0.71 to 5.0. A
  293. larger distance puts the graph further away, making it smaller.
  294. All parameters are optional.
  295. </tr>
  296. <tr>
  297. <td>height</td>
  298. <td>string</td>
  299. <td>'400px'</td>
  300. <td>The height of the graph in pixels or as a percentage.</td>
  301. </tr>
  302. <tr>
  303. <td>keepAspectRatio</td>
  304. <td>boolean</td>
  305. <td>true</td>
  306. <td>If <code>keepAspectRatio</code> is true, the x-axis and the y-axis
  307. keep their aspect ratio. If false, the axes are scaled such that they
  308. both have the same, maximum with.</td>
  309. </tr>
  310. <tr>
  311. <td>showAnimationControls</td>
  312. <td>boolean</td>
  313. <td>true</td>
  314. <td>If true, animation controls are created at the bottom of the Graph.
  315. The animation controls consists of buttons previous, start/stop, next,
  316. and a slider showing the current frame.
  317. Only applicable when the provided data contains an animation.</td>
  318. </tr>
  319. <tr>
  320. <td>showGrid</td>
  321. <td>boolean</td>
  322. <td>true</td>
  323. <td>If true, grid lines are draw in the x-y surface (the bottom of the 3d
  324. graph).</td>
  325. </tr>
  326. <tr>
  327. <td>showPerspective</td>
  328. <td>boolean</td>
  329. <td>true</td>
  330. <td>If true, the graph is drawn in perspective: points and lines which
  331. are further away are drawn smaller.
  332. Note that the graph currently does not support a gray colored bottom side
  333. when drawn in perspective.
  334. </td>
  335. </tr>
  336. <tr>
  337. <td>showShadow</td>
  338. <td>boolean</td>
  339. <td>false</td>
  340. <td>Show shadow on the graph.</td>
  341. </tr>
  342. <tr>
  343. <td>style</td>
  344. <td>string</td>
  345. <td>'dot'</td>
  346. <td>The style of the 3d graph. Available styles:
  347. <code>bar</code>,
  348. <code>bar-color</code>,
  349. <code>bar-size</code>,
  350. <code>dot</code>,
  351. <code>dot-line</code>,
  352. <code>dot-color</code>,
  353. <code>dot-size</code>,
  354. <code>line</code>,
  355. <code>grid</code>,
  356. or <code>surface</code></td>
  357. </tr>
  358. <tr>
  359. <td>tooltip</td>
  360. <td>boolean | function</td>
  361. <td>false</td>
  362. <td>Show a tooltip showing the values of the hovered data point.
  363. The contents of the tooltip can be customized by providing a callback
  364. function as <code>tooltip</code>. In this case the function is called
  365. with an object containing parameters <code>x</code>,
  366. <code>y</code>, and <code>z</code> argument,
  367. and must return a string which may contain HTML.
  368. </td>
  369. </tr>
  370. <tr>
  371. <td>valueMax</td>
  372. <td>number</td>
  373. <td>none</td>
  374. <td>The maximum value for the value-axis. Only available in combination
  375. with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
  376. </tr>
  377. <tr>
  378. <td>valueMin</td>
  379. <td>number</td>
  380. <td>none</td>
  381. <td>The minimum value for the value-axis. Only available in combination
  382. with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
  383. </tr>
  384. <tr>
  385. <td>verticalRatio</td>
  386. <td>number</td>
  387. <td>0.5</td>
  388. <td>A value between 0.1 and 1.0. This scales the vertical size of the graph
  389. When keepAspectRatio is set to false, and verticalRatio is set to 1.0,
  390. the graph will be a cube.</td>
  391. </tr>
  392. <tr>
  393. <td>width</td>
  394. <td>string</td>
  395. <td>'400px'</td>
  396. <td>The width of the graph in pixels or as a percentage.</td>
  397. </tr>
  398. <tr>
  399. <td>xBarWidth</td>
  400. <td>number</td>
  401. <td>none</td>
  402. <td>The width of bars in x direction. By default, the width is equal to the distance
  403. between the data points, such that bars adjoin each other.
  404. Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
  405. </tr>
  406. <tr>
  407. <td>xCenter</td>
  408. <td>string</td>
  409. <td>'55%'</td>
  410. <td>The horizontal center position of the graph, as a percentage or in
  411. pixels.</td>
  412. </tr>
  413. <tr>
  414. <td>xMax</td>
  415. <td>number</td>
  416. <td>none</td>
  417. <td>The maximum value for the x-axis.</td>
  418. </tr>
  419. <tr>
  420. <td>xMin</td>
  421. <td>number</td>
  422. <td>none</td>
  423. <td>The minimum value for the x-axis.</td>
  424. </tr>
  425. <tr>
  426. <td>xStep</td>
  427. <td>number</td>
  428. <td>none</td>
  429. <td>Step size for the grid on the x-axis.</td>
  430. </tr>
  431. <tr>
  432. <td>xValueLabel</td>
  433. <td>function</td>
  434. <td>none</td>
  435. <td>A function for custom formatting of the labels along the x-axis,
  436. for example <code>function (x) {return (x * 100) + '%'}</code>.
  437. </td>
  438. </tr>
  439. <tr>
  440. <td>yBarWidth</td>
  441. <td>number</td>
  442. <td>none</td>
  443. <td>The width of bars in y direction. By default, the width is equal to the distance
  444. between the data points, such that bars adjoin each other.
  445. Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
  446. </tr>
  447. <tr>
  448. <td>yCenter</td>
  449. <td>string</td>
  450. <td>'45%'</td>
  451. <td>The vertical center position of the graph, as a percentage or in
  452. pixels.</td>
  453. </tr>
  454. <tr>
  455. <td>yMax</td>
  456. <td>number</td>
  457. <td>none</td>
  458. <td>The maximum value for the y-axis.</td>
  459. </tr>
  460. <tr>
  461. <td>yMin</td>
  462. <td>number</td>
  463. <td>none</td>
  464. <td>The minimum value for the y-axis.</td>
  465. </tr>
  466. <tr>
  467. <td>yStep</td>
  468. <td>number</td>
  469. <td>none</td>
  470. <td>Step size for the grid on the y-axis.</td>
  471. </tr>
  472. <tr>
  473. <td>yValueLabel</td>
  474. <td>function</td>
  475. <td>none</td>
  476. <td>A function for custom formatting of the labels along the y-axis,
  477. for example <code>function (y) {return (y * 100) + '%'}</code>.
  478. </td>
  479. </tr>
  480. <tr>
  481. <td>zMin</td>
  482. <td>number</td>
  483. <td>none</td>
  484. <td>The minimum value for the z-axis.</td>
  485. </tr>
  486. <tr>
  487. <td>zMax</td>
  488. <td>number</td>
  489. <td>none</td>
  490. <td>The maximum value for the z-axis.</td>
  491. </tr>
  492. <tr>
  493. <td>zStep</td>
  494. <td>number</td>
  495. <td>none</td>
  496. <td>Step size for the grid on the z-axis.</td>
  497. </tr>
  498. <tr>
  499. <td>zValueLabel</td>
  500. <td>function</td>
  501. <td>none</td>
  502. <td>A function for custom formatting of the labels along the z-axis,
  503. for example <code>function (z) {return (z * 100) + '%'}</code>.
  504. </td>
  505. </tr>
  506. <tr>
  507. <td>xLabel</td>
  508. <td>String</td>
  509. <td>x</td>
  510. <td>Label on the X axis.</td>
  511. </tr>
  512. <tr>
  513. <td>yLabel</td>
  514. <td>String</td>
  515. <td>y</td>
  516. <td>Label on the Y axis.</td>
  517. </tr>
  518. <tr>
  519. <td>zLabel</td>
  520. <td>String</td>
  521. <td>z</td>
  522. <td>Label on the Z axis.</td>
  523. </tr>
  524. <tr>
  525. <td>filterLabel</td>
  526. <td>String</td>
  527. <td>time</td>
  528. <td>Label for the filter column.</td>
  529. </tr>
  530. <tr>
  531. <td>legendLabel</td>
  532. <td>String</td>
  533. <td>value</td>
  534. <td>Label for the style description.</td>
  535. </tr>
  536. </table>
  537. <h2 id="Methods">Methods</h2>
  538. <p>
  539. Graph3d supports the following methods.
  540. </p>
  541. <table class="methods">
  542. <tr>
  543. <th>Method</th>
  544. <th>Return Type</th>
  545. <th>Description</th>
  546. </tr>
  547. <tr>
  548. <td>animationStart()</td>
  549. <td>none</td>
  550. <td>Start playing the animation.
  551. Only applicable when animation data is available.</td>
  552. </tr>
  553. <tr>
  554. <td>animationStop()</td>
  555. <td>none</td>
  556. <td>Stop playing the animation.
  557. Only applicable when animation data is available.</td>
  558. </tr>
  559. <tr>
  560. <td>getCameraPosition()</td>
  561. <td>An object with parameters <code>horizontal</code>,
  562. <code>vertical</code> and <code>distance</code></td>
  563. <td>Returns an object with parameters <code>horizontal</code>,
  564. <code>vertical</code> and <code>distance</code>,
  565. which each one of them is a number, representing the rotation and position
  566. of the camera.</td>
  567. </tr>
  568. <tr>
  569. <td>redraw()</td>
  570. <td>none</td>
  571. <td>Redraw the graph. Useful after the camera position is changed externally,
  572. when data is changed, or when the layout of the webpage changed.</td>
  573. </tr>
  574. <tr>
  575. <td>setData(data)</td>
  576. <td>none</td>
  577. <td>Replace the data in the Graph3d.</td>
  578. </tr>
  579. <tr>
  580. <td>setOptions(options)</td>
  581. <td>none</td>
  582. <td>Update options of Graph3d.
  583. The provided options will be merged with current options.</td>
  584. </tr>
  585. <tr>
  586. <td>setSize(width, height)</td>
  587. <td>none</td>
  588. <td>Parameters <code>width</code> and <code>height</code> are strings,
  589. containing a new size for the graph. Size can be provided in pixels
  590. or in percentages.</td>
  591. </tr>
  592. <tr>
  593. <td>setCameraPosition (pos)</td>
  594. <td>{horizontal:&nbsp;1.0, vertical:&nbsp;0.5, distance:&nbsp;1.7}</td>
  595. <td>Set the rotation and position of the camera. Parameter <code>pos</code>
  596. is an object which contains three parameters: <code>horizontal</code>,
  597. <code>vertical</code>, and <code>distance</code>.
  598. Parameter <code>horizontal</code> is a value in radians and can have any
  599. value (but normally in the range of 0 and 2*Pi).
  600. Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
  601. Parameter <code>distance</code> is the (normalized) distance from the
  602. camera to the center of the graph, in the range of 0.71 to 5.0. A
  603. larger distance puts the graph further away, making it smaller.
  604. All parameters are optional.
  605. </td>
  606. </tr>
  607. </table>
  608. <h2 id="Events">Events</h2>
  609. <p>
  610. Graph3d fires events after the camera position has been changed.
  611. The event can be catched by creating a listener.
  612. Here an example on how to catch a <code>cameraPositionChange</code> event.
  613. </p>
  614. <pre class="prettyprint lang-js">
  615. function onCameraPositionChange(event) {
  616. alert('The camera position changed to:\n' +
  617. 'Horizontal: ' + event.horizontal + '\n' +
  618. 'Vertical: ' + event.vertical + '\n' +
  619. 'Distance: ' + event.distance);
  620. }
  621. // assuming var graph3d = new vis.Graph3d(document.getElementById('mygraph'));
  622. graph3d.on('cameraPositionChange', onCameraPositionChange);
  623. </pre>
  624. <p>
  625. The following events are available.
  626. </p>
  627. <table class="events">
  628. <tr>
  629. <th>name</th>
  630. <th>Properties</th>
  631. <th>Description</th>
  632. </tr>
  633. <tr>
  634. <td>cameraPositionChange</td>
  635. <td>
  636. <ul>
  637. <li><code>horizontal</code>: Number. The horizontal angle of the camera.</li>
  638. <li><code>vertical</code>: Number. The vertical angle of the camera.</li>
  639. <li><code>distance</code>: Number. The distance of the camera to the center of the graph.</li>
  640. </ul>
  641. </td>
  642. <td>The camera position changed. Fired after the user modified the camera position
  643. by moving (dragging) the graph, or by zooming (scrolling),
  644. but not after a call to <code>setCameraPosition</code> method.
  645. The new camera position can be retrieved by calling the method
  646. <code>getCameraPosition</code>.</td>
  647. </tr>
  648. </table>
  649. <h2 id="Data_Policy">Data Policy</h2>
  650. <p>
  651. All code and data are processed and rendered in the browser. No data is sent to any server.
  652. </p>
  653. </div>
  654. <!-- Bootstrap core JavaScript
  655. ================================================== -->
  656. <!-- Placed at the end of the document so the pages load faster -->
  657. <script src="../js/jquery.min.js"></script>
  658. <script src="../js/bootstrap.min.js"></script>
  659. <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  660. <script src="../js/ie10-viewport-bug-workaround.js"></script>