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.

652 lines
28 KiB

9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta name="description" content="">
  8. <meta name="author" content="">
  9. <link rel="icon" HREF="favicon.ico">
  10. <title>vis.js - Edges documentation.</title>
  11. <!-- Bootstrap core CSS -->
  12. <link href="../css/bootstrap.css" rel="stylesheet">
  13. <link href="../css/style.css" rel="stylesheet">
  14. <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
  15. <script type="text/javascript" src="../js/googleAnalytics.js"></script>
  16. <script type="text/javascript" src="../js/prettify/prettify.js"></script>
  17. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  18. <!--[if lt IE 9]>
  19. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  20. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  21. <![endif]-->
  22. <script src="../js/smooth-scroll.min.js"></script>
  23. <script language="JavaScript">
  24. smoothScroll.init();
  25. </script>
  26. <style>
  27. td.type {
  28. width: 90px;
  29. }
  30. </style>
  31. <script type="text/javascript" src="../js/toggleTable.js"></script>
  32. </head>
  33. <!-- NAVBAR
  34. ================================================== -->
  35. <body onload="prettyPrint();">
  36. <div class="navbar-wrapper">
  37. <div class="container">
  38. <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  39. <div class="container">
  40. <div class="navbar-header">
  41. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
  42. aria-expanded="false" aria-controls="navbar">
  43. <span class="sr-only">Toggle navigation</span>
  44. <span class="icon-bar"></span>
  45. <span class="icon-bar"></span>
  46. <span class="icon-bar"></span>
  47. </button>
  48. <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
  49. </div>
  50. <div id="navbar" class="navbar-collapse collapse">
  51. <ul class="nav navbar-nav">
  52. <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
  53. <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
  54. <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
  55. <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
  56. <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
  57. <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
  58. <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
  59. </ul>
  60. </div>
  61. </div>
  62. </nav>
  63. </div>
  64. </div>
  65. <a href="https://github.com/almende/vis" class="hidden-xs hidden-sm hidden-md"><img
  66. style="position: absolute; top: 0; right: 0; border: 0;"
  67. src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
  68. alt="Fork me on GitHub"
  69. data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
  70. <div class="container full">
  71. <h1>Network - edges</h1>
  72. <p>Handles the creation and deletion of edges and contains the global edge options and styles.</p>
  73. <a class="btn btn-primary" role="button" onclick="history.back()">Back to overview.</a>
  74. <h3>Options</h3>
  75. <p>The options for the edges have to be contained in an object titled 'edges'. All of these options can be supplied per edge as well. Obviously, 'id' should not be defined globally but per edge. Options defined
  76. in the global edges object, are applied to all edges. If an edge has options of its own, those will be used instead of the global options.</p>
  77. <p><b><i>When you have given an edge an option, you will override the global option for that property. If you then set that option to <code>null</code>,
  78. it will revert back to the default value.</i></b>
  79. </p>
  80. <p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
  81. <ul class="nav nav-tabs">
  82. <li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
  83. <li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">full options</a></li>
  84. <li role="presentation" onclick="toggleTab(this);" targetNode="shortOptions"><a href="#">shorthand options</a></li>
  85. </ul>
  86. <br>
  87. <pre class="prettyprint lang-js options top hidden" id="fullOptions">
  88. // these are all options in full.
  89. var options = {
  90. edges:{
  91. arrows: {
  92. to: {enabled: false, scaleFactor:1},
  93. middle: {enabled: false, scaleFactor:1},
  94. from: {enabled: false, scaleFactor:1}
  95. },
  96. color: {
  97. color:'#848484',
  98. highlight:'#848484',
  99. hover: '#848484',
  100. inherit: 'from',
  101. opacity:1.0
  102. },
  103. dashes: false,
  104. font: {
  105. color: '#343434',
  106. size: 14, // px
  107. face: 'arial',
  108. background: 'none',
  109. strokeWidth: 2, // px
  110. strokeColor: '#ffffff',
  111. align:'horizontal'
  112. },
  113. hidden: false,
  114. hoverWidth: 1.5,
  115. label: undefined,
  116. length: undefined,
  117. physics: true,
  118. scaling:{
  119. min: 1,
  120. max: 15,
  121. label: {
  122. enabled: true,
  123. min: 14,
  124. max: 30,
  125. maxVisible: 30,
  126. drawThreshold: 5
  127. },
  128. customScalingFunction: function (min,max,total,value) {
  129. if (max === min) {
  130. return 0.5;
  131. }
  132. else {
  133. var scale = 1 / (max - min);
  134. return Math.max(0,(value - min)*scale);
  135. }
  136. }
  137. },
  138. selectionWidth: 1,
  139. selfReferenceSize:20,
  140. shadow:{
  141. enabled: false,
  142. size:10,
  143. x:5,
  144. y:5
  145. },
  146. smooth: {
  147. enabled: true,
  148. type: "dynamic",
  149. roundness: 0.5
  150. },
  151. title:undefined,
  152. width: 1,
  153. value: undefined
  154. }
  155. }
  156. network.setOptions(options);
  157. </pre>
  158. <pre class="prettyprint lang-js options top hidden" id="shortOptions">
  159. // here all options that have shorthand notations are shown.
  160. var options = {
  161. edges:{
  162. arrows: 'to, from',
  163. color: 'red',
  164. font: '12px arial #ff0000',
  165. scaling:{
  166. label: true,
  167. },
  168. shadow: true,
  169. smooth: true,
  170. }
  171. }
  172. network.setOptions(options);
  173. </pre>
  174. <p>These options can also be set per individual edge.</p>
  175. <table class="options" id="optionTable">
  176. <tr>
  177. <th>Name</th>
  178. <th>Type</th>
  179. <th>Default</th>
  180. <th>Description</th>
  181. </tr>
  182. <tr class='toggle collapsible' onclick="toggleTable('optionTable','arrows', this);">
  183. <td><span parent="arrows" class="right-caret"></span> arrows</td>
  184. <td>Object or String</td>
  185. <td><code>undefined</code></td>
  186. <td>To draw an arrow with default settings a string can be supplied. For example: <code>arrows:'to, from,
  187. middle'</code> or <code>'to;from'</code>, any combination with any seperating symbol is fine. If you
  188. want to control the size of the arrowheads, you can supply an object.
  189. </td>
  190. </tr>
  191. <tr parent="arrows" class="hidden">
  192. <td class="indent">arrows.to</td>
  193. <td>Object or Boolean</td>
  194. <td><code>Object</code></td>
  195. <td>When true, an arrowhead on the 'to' side of the edge is drawn, pointing to the 'to' node with default
  196. settings. To customize the size of the arrow, supply an object.
  197. </td>
  198. </tr>
  199. <tr parent="arrows" class="hidden">
  200. <td class="indent2">arrows.to.enabled</td>
  201. <td>Boolean</td>
  202. <td><code>false</code></td>
  203. <td>Toggle the arrow on or off. This option is optional, if undefined and the scaleFactor property is set,
  204. enabled will be set to true.
  205. </td>
  206. </tr>
  207. <tr parent="arrows" class="hidden">
  208. <td class="indent2">arrows.to.scaleFactor</td>
  209. <td>Number</td>
  210. <td><code>1</code></td>
  211. <td>The scale factor allows you to change the size of the arrowhead.</td>
  212. </tr>
  213. <tr parent="arrows" class="hidden">
  214. <td class="indent">arrows.middle</td>
  215. <td>Object or Boolean</td>
  216. <td><code>Object</code></td>
  217. <td>Exactly the same as the to object but with an arrowhead in the center of the edge.</td>
  218. </tr>
  219. <tr parent="arrows" class="hidden">
  220. <td class="indent">arrows.from</td>
  221. <td>Object or Boolean</td>
  222. <td><code>Object</code></td>
  223. <td>Exactly the same as the to object but with an arrowhead at the from node of the edge.</td>
  224. </tr>
  225. <tr class='toggle collapsible' onclick="toggleTable('optionTable','color', this);">
  226. <td><span parent="color" class="right-caret"></span> color</td>
  227. <td>Object or String</td>
  228. <td><code>Object</code></td>
  229. <td>The color object contains the color information of the edge in every situation. When the edge only needs
  230. a single color, a color value like <code>'rgb(120,32,14)'</code>, <code>'#ffffff'</code> or
  231. <code>'red'</code> can be supplied instead of an object.
  232. </td>
  233. </tr>
  234. <tr parent="color" class="hidden">
  235. <td class="indent">color.color</td>
  236. <td>String</td>
  237. <td><code>'#848484'</code></td>
  238. <td>The color of the border of the node when it is not selected or hovered over <i>(assuming hover is
  239. enabled in the interaction module)</i>.
  240. </td>
  241. </tr>
  242. <tr parent="color" class="hidden">
  243. <td class="indent">color.highlight</td>
  244. <td>String</td>
  245. <td><code>'#848484'</code></td>
  246. <td>The color the edge when it is selected.</td>
  247. </tr>
  248. <tr parent="color" class="hidden">
  249. <td class="indent">color.hover</td>
  250. <td>String</td>
  251. <td><code>'#848484'</code></td>
  252. <td>The color the edge when the mouse hovers over it <i>(assuming hover is enabled in the interaction
  253. module)</i>.
  254. </td>
  255. </tr>
  256. <tr parent="color" class="hidden">
  257. <td class="indent">color.inherit</td>
  258. <td>String or Boolean</td>
  259. <td><code>'from'</code></td>
  260. <td><i>When color, highlight or hover are defined, inherit is set to false!</i>
  261. <br><br>Supported options are: <code>true, false, 'from','to','both'</code>.
  262. <br><br>The default value is 'from' which does the same as true: the edge will inherit the color from
  263. the border of the node on the 'from' side.
  264. <br><br>When set to 'to', the border color from the 'to' node will be used.
  265. <br><br>When set to 'both', the color will fade from the from color to the to color. <b>'both' is
  266. computationally intensive</b> because the gradient is recomputed every redraw. This is required
  267. because the angles change when the nodes move.
  268. </td>
  269. </tr>
  270. <tr parent="color" class="hidden">
  271. <td class="indent">color.opacity</td>
  272. <td>Number</td>
  273. <td><code>1.0</code></td>
  274. <td>It can be useful to set the opacity of an edge without manually changing all the colors. The opacity
  275. option will convert all colors (also when using inherit) to adhere to the supplied opacity. The allowed
  276. range of the opacity option is between <code>0 and 1</code>. This is only done once so the performance
  277. impact is not too big.
  278. </td>
  279. </tr>
  280. <tr>
  281. <td>dashes</td>
  282. <td>Array or Boolean</td>
  283. <td><code>false</code></td>
  284. <td>When true, the edge will be drawn as a dashed line. You can customize the dashes by supplying an Array.
  285. Array formart: Array of numbers, gap length, dash length, gap length, dash length, ... etc. The array is
  286. repeated until the distance is filled.
  287. <i>When using dashed lines in IE versions older than 11, the line will be drawn straight, not smooth</i>.
  288. </td>
  289. </tr>
  290. <tr class='toggle collapsible' onclick="toggleTable('optionTable','font', this);">
  291. <td><span parent="font" class="right-caret"></span> font</td>
  292. <td>Object or String</td>
  293. <td><code>false</code></td>
  294. <td>This object defines the details of the label. A shorthand is also supported in the form <code>'size face
  295. color'</code> for example: <code>'14px arial red'</code>.
  296. </td>
  297. </tr>
  298. <tr parent="font" class="hidden">
  299. <td class="indent">font.color</td>
  300. <td>String</td>
  301. <td><code>'#343434'</code></td>
  302. <td>Color of the label text.</td>
  303. </tr>
  304. <tr parent="font" class="hidden">
  305. <td class="indent">font.size</td>
  306. <td>Number</td>
  307. <td><code>14</code></td>
  308. <td>Size of the label text.</td>
  309. </tr>
  310. <tr parent="font" class="hidden">
  311. <td class="indent">font.face</td>
  312. <td>String</td>
  313. <td><code>'arial'</code></td>
  314. <td>Font face (or font family) of the label text.</td>
  315. </tr>
  316. <tr parent="font" class="hidden">
  317. <td class="indent">font.background</td>
  318. <td>String</td>
  319. <td><code>undefined</code></td>
  320. <td>When not <code>undefined</code> but a <b>color string</b>, a background rectangle will be drawn behind
  321. the label in the supplied color.
  322. </td>
  323. </tr>
  324. <tr parent="font" class="hidden">
  325. <td class="indent">font.strokeWidth</td>
  326. <td>Number</td>
  327. <td><code>2</code></td>
  328. <td>As an alternative to the background rectangle, a stroke can be drawn around the text. When a value
  329. higher than 0 is supplied, the stroke will be drawn.
  330. </td>
  331. </tr>
  332. <tr parent="font" class="hidden">
  333. <td class="indent">font.strokeColor</td>
  334. <td>String</td>
  335. <td><code>'#ffffff'</code></td>
  336. <td>This is the color of the stroke <i>assuming the value for stroke is higher than 0</i>.</td>
  337. </tr>
  338. <tr parent="font" class="hidden">
  339. <td class="indent">font.align</td>
  340. <td>String</td>
  341. <td><code>'horizontal'</code></td>
  342. <td>Possible options: <code>'horizontal','top','middle','bottom'</code>. The alignment determines how the
  343. label is aligned over the edge. The default value <code>horizontal</code> aligns the label horizontally,
  344. regardless of the orientation of the edge. When an option other than <code>horizontal</code> is chosen,
  345. the label will align itself according to the edge.
  346. </td>
  347. </tr>
  348. <tr>
  349. <td>from</td>
  350. <td>Number or String</td>
  351. <td></td>
  352. <td>Edges are between two nodes, one to and one from. This is where you define the from node. You have to supply the corresponding node ID. This naturally only applies to individual edges.</td>
  353. </tr>
  354. <tr>
  355. <td>hidden</td>
  356. <td>Boolean</td>
  357. <td><code>false</code></td>
  358. <td>When true, the edge is not drawn. It is part still part of the physics simulation however!</td>
  359. </tr>
  360. <tr>
  361. <td>hoverWidth</td>
  362. <td>Number or Function</td>
  363. <td><code>0.5</code></td>
  364. <td>Assuming the hover behaviour is enabled in the <a href="./interaction.html">interaction module</a>, the
  365. hoverWidth determines the width of the edge when the user hovers over it with the mouse. If a number is
  366. supplied, this number will be <b>added</b> to the width.
  367. Because the width can be altered by the value and the scaling functions, a constant multiplier or added
  368. value may not give the best results. To solve this, you can supply a function. Example:
  369. <pre class="code">
  370. var options: {
  371. edges: {
  372. hoverWidth: function (width) {return width+1;}
  373. }
  374. }
  375. </pre>
  376. It receives the <code>Number width</code> of the edge. In this simple example we add 1 to the width. You
  377. can taylor the logic in the function as long as it returns a <code>Number</code>.
  378. </td>
  379. </tr>
  380. <tr>
  381. <td>id</td>
  382. <td>String</td>
  383. <td><code>undefined</code></td>
  384. <td>The id of the edge. The id is optional for edges. When not supplied, an UUID will be assigned to the edge. This naturally only applies to individual edges.</td>
  385. </tr>
  386. <tr>
  387. <td>label</td>
  388. <td>String</td>
  389. <td><code>undefined</code></td>
  390. <td>The label of the edge. HTML does not work in here because the network uses HTML5 Canvas.</td>
  391. </tr>
  392. <tr>
  393. <td>length</td>
  394. <td>Number</td>
  395. <td><code>undefined</code></td>
  396. <td>The physics simulation gives edges a spring length. This value can override the length of the spring in
  397. rest.
  398. </td>
  399. </tr>
  400. <tr>
  401. <td>physics</td>
  402. <td>Boolean</td>
  403. <td><code>true</code></td>
  404. <td>When true, the edge is part of the physics simulation. When false, it will not act as a spring.</td>
  405. </tr>
  406. <tr class='toggle collapsible' onclick="toggleTable('optionTable','scaling', this);">
  407. <td><span parent="scaling" class="right-caret"></span> scaling</td>
  408. <td>Object</td>
  409. <td><code>Object</code></td>
  410. <td>If the <code>value</code> option is specified, the width of the edges will be scaled according to the
  411. properties in this object. Keep in mind that when using scaling, the <code>width</code> option is
  412. neglected.
  413. </td>
  414. </tr>
  415. <tr parent="scaling" class="hidden">
  416. <td class="indent">scaling.min</td>
  417. <td>Number</td>
  418. <td><code>1</code></td>
  419. <td>If edges have a value, their widths are determined by the value, the scaling function and the min max
  420. values. The min value is the minimum allowed value.
  421. </td>
  422. </tr>
  423. <tr parent="scaling" class="hidden">
  424. <td class="indent">scaling.max</td>
  425. <td>Number</td>
  426. <td><code>15</code></td>
  427. <td>This is the maximum allowed width when the edges are scaled using the value option.</td>
  428. </tr>
  429. <tr parent="scaling" class="hidden">
  430. <td class="indent">scaling.label</td>
  431. <td>Object or Boolean</td>
  432. <td><code>Object</code></td>
  433. <td>When false, the label is not allowed to scale with the edge. If true it will scale using default
  434. settigns. For further customization, you can supply an object.
  435. </td>
  436. </tr>
  437. <tr parent="scaling" class="hidden">
  438. <td class="indent2">scaling.label.enabled</td>
  439. <td>Boolean</td>
  440. <td><code>false</code></td>
  441. <td>Toggle the scaling of the label on or off. If this option is not defined, it is set to true if any of
  442. the properties in this object are defined.
  443. </td>
  444. </tr>
  445. <tr parent="scaling" class="hidden">
  446. <td class="indent2">scaling.label.min</td>
  447. <td>Number</td>
  448. <td><code>14</code></td>
  449. <td>The minimum font-size used for labels when scaling.</td>
  450. </tr>
  451. <tr parent="scaling" class="hidden">
  452. <td class="indent2">scaling.label.max</td>
  453. <td>Number</td>
  454. <td><code>30</code></td>
  455. <td>The maximum font-size used for labels when scaling.</td>
  456. </tr>
  457. <tr parent="scaling" class="hidden">
  458. <td class="indent2">scaling.label.maxVisible</td>
  459. <td>Number</td>
  460. <td><code>30</code></td>
  461. <td>When zooming in, the font is drawn larger as well. You can limit the perceived font size using this
  462. option. If set to 30, the font will never look larger than size 30 zoomed at 100%.
  463. </td>
  464. </tr>
  465. <tr parent="scaling" class="hidden">
  466. <td class="indent2">scaling.label.drawThreshold</td>
  467. <td>Number</td>
  468. <td><code>5</code></td>
  469. <td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn.
  470. When using font scaling, you can use this together with the maxVisible to first show labels of important
  471. edges when zoomed out and only show the rest when zooming in.
  472. </td>
  473. </tr>
  474. <tr parent="scaling" class="hidden">
  475. <td class="indent">scaling.customScalingFunction</td>
  476. <td>Function</td>
  477. <td>in description</td>
  478. <td>If edges have <code>value</code> fields, this function determines how the size of the nodes are scaled
  479. based on their values. The default function is:
  480. <pre>
  481. function (min,max,total,value) {
  482. if (max === min) {
  483. return 0.5;
  484. }
  485. else {
  486. var scale = 1 / (max - min);
  487. return Math.max(0,(value - min)*scale);
  488. }
  489. }
  490. </pre>
  491. The function receives the minimum value of the set, the maximum value, the total sum of all values and
  492. finally the value of the node or edge it works on. <b>It has to return a value between 0 and 1.</b> The
  493. nodes and edges then calculate their size as follows:
  494. <pre>
  495. var scale = customScalingFunction(min,max,total,value);
  496. var diff = maxWidth - minWidth;
  497. myWidth = minWidth + diff * scale;
  498. </pre>
  499. </td>
  500. </tr>
  501. <tr>
  502. <td>selectionWidth</td>
  503. <td>Number or Function</td>
  504. <td><code>1</code></td>
  505. <td>The selectionWidth determines the width of the edge when the edge is selected. If a number is supplied,
  506. this number will be <b>added</b> to the width.
  507. Because the width can be altered by the value and the scaling functions, a constant multiplier or added
  508. value may not give the best results. To solve this, you can supply a function. Example:
  509. <pre class="code">
  510. var options: {
  511. edges: {
  512. selectionWidth: function (width) {return width*2;}
  513. }
  514. }
  515. </pre>
  516. It receives the <code>Number width</code> of the edge. In this simple example multiply the width by 2.
  517. You can taylor the logic in the function as long as it returns a <code>Number</code>.
  518. </td>
  519. </tr>
  520. <tr>
  521. <td>selfReferenceSize</td>
  522. <td>Number</td>
  523. <td><code>false</code></td>
  524. <td>When the to and from nodes are the same, a circle is drawn. This is the radius of that circle.</td>
  525. </tr>
  526. <tr class='toggle collapsible' onclick="toggleTable('optionTable','shadow', this);">
  527. <td><span parent="shadow" class="right-caret"></span> shadow</td>
  528. <td>Object or Boolean</td>
  529. <td><code>Object</code></td>
  530. <td>When true, the edge casts a shadow using the default settings. This can be further refined by supplying
  531. an object.
  532. </td>
  533. </tr>
  534. <tr parent="shadow" class="hidden">
  535. <td class="indent">shadow.enabled</td>
  536. <td>Boolean</td>
  537. <td><code>false</code></td>
  538. <td>Toggle the casting of shadows. If this option is not defined, it is set to true if any of the properties
  539. in this object are defined.
  540. </td>
  541. </tr>
  542. <tr parent="shadow" class="hidden">
  543. <td class="indent">shadow.size</td>
  544. <td>Number</td>
  545. <td><code>10</code></td>
  546. <td>The blur size of the shadow.</td>
  547. </tr>
  548. <tr parent="shadow" class="hidden">
  549. <td class="indent">shadow.x</td>
  550. <td>Number</td>
  551. <td><code>5</code></td>
  552. <td>The x offset.</td>
  553. </tr>
  554. <tr parent="shadow" class="hidden">
  555. <td class="indent">shadow.y</td>
  556. <td>Number</td>
  557. <td><code>5</code></td>
  558. <td>The y offset.</td>
  559. </tr>
  560. <tr class='toggle collapsible' onclick="toggleTable('optionTable','smooth', this);">
  561. <td><span parent="smooth" class="right-caret"></span> smooth</td>
  562. <td>Object or Boolean</td>
  563. <td><code>Object</code></td>
  564. <td>When true, the edge is drawn as a dynamic quadratic bezier curve. The drawing of these curves takes longer than
  565. that of straight curves but it looks better.
  566. There is a difference between dynamic smooth curves and static smooth curves. The dynamic smooth curves
  567. have an invisible support node that takes part in the physics simulation. If you have a lot of edges,
  568. you may want to consider picking a different type of smooth curves then dynamic for better performance.
  569. </td>
  570. </tr>
  571. <tr parent="smooth" class="hidden">
  572. <td class="indent">smooth.enabled</td>
  573. <td>Boolean</td>
  574. <td><code>true</code></td>
  575. <td>Toggle smooth curves on and off. This is an optional option. If any of the other properties in this
  576. object are set, this option will be set to true.
  577. </td>
  578. </tr>
  579. <tr parent="smooth" class="hidden">
  580. <td class="indent">smooth.type</td>
  581. <td>String</td>
  582. <td><code>'dynamic'</code></td>
  583. <td>Possible options: <code>'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal',
  584. 'vertical', 'curvedCW', 'curvedCCW'</code>. Take a look at our example 26 to see what these look like
  585. and pick the one that you like best!
  586. <br><br>
  587. When using dynamic, the edges will have an invisible support node guiding the shape. This node is part of the
  588. physics simulation.
  589. </td>
  590. </tr>
  591. <tr parent="smooth" class="hidden">
  592. <td class="indent">smooth.roundness</td>
  593. <td>Number</td>
  594. <td><code>0.5</code></td>
  595. <td>Accepted range: <code>0 .. 1.0</code>. This parameter tweaks the roundness of the smooth curves for all types EXCEPT dynamic.
  596. </td>
  597. </tr>
  598. <tr>
  599. <td>title</td>
  600. <td>String</td>
  601. <td><code>undefined</code></td>
  602. <td>The title is shown in a pop-up when the mouse moves over the edge.</td>
  603. </tr>
  604. <tr>
  605. <td>to</td>
  606. <td>Number or String</td>
  607. <td></td>
  608. <td>Edges are between two nodes, one to and one from. This is where you define the to node. You have to supply the corresponding node ID. This naturally only applies to individual edges.</td>
  609. </tr>
  610. <tr>
  611. <td>value</td>
  612. <td>Number</td>
  613. <td><code>undefined</code></td>
  614. <td>When a value is set, the edges' width will be scaled using the options in the scaling object defined
  615. above.
  616. </td>
  617. </tr>
  618. <tr>
  619. <td>width</td>
  620. <td>Number</td>
  621. <td><code>1</code></td>
  622. <td>The width of the edge. If value is set, this is not used.</td>
  623. </tr>
  624. </table>
  625. </div>
  626. <!-- Bootstrap core JavaScript
  627. ================================================== -->
  628. <!-- Placed at the end of the document so the pages load faster -->
  629. <script src="../js/jquery.min.js"></script>
  630. <script src="../js/bootstrap.min.js"></script>
  631. <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  632. <script src="../js/ie10-viewport-bug-workaround.js"></script>