mirror of
https://github.com/stylersnico/librenms.git
synced 2026-07-29 16:29:55 +02:00
Squashed 'lib/vis/' changes from 1d029ca..58f0da39
58f0da39 Released v4.5.0 c507a59 made all search go buttons a live search instead of submit b377194 fixed hover and blur events for edges. f7d1b46 added configChange event 4ef684a Fixed #1087, updated history 5c411a9 polising the network docs a little 5f46591 unfolded tabs 3f3509f Merge remote-tracking branch 'origin/develop' into develop b0ca320 bit more hacking to make search blazingly fast :) dfd9114 Merge pull request #1091 from ChenMachluf/develop e1f7c1a remove subgroup from subgroups list if there is no more items in the subgroup. ba4f282 Merge remote-tracking branch 'origin/develop' into develop 2ce1f12 Fixed #1076: hiding remainder grid line at the end of a month a85d046 added live update for search 38cba4c Updated history afe0305 Merge pull request #1082 from hansmaulwurf23/zoom_key d881052 added zoomKey option to Graph2d, added missing docs adb5bce fixed missing validation of available zoomKey option values c0f0ab9 Merge pull request #1084 from felixhayashi/develop be603b01 yay! new search for visjs.org 5d5f589 Merge remote-tracking branch 'origin/develop' into develop 1bc9ea4 fixed clustering bug #1083 1a3fa5b typo 11c820a added zoomKey to apply zooming only when a specific key is down b175068 Fixed #1076: Fixed possible overlap of minor labels text on the TimeAxis 25706fb Updated history 58986aa Merged #996 89660a3 Added missing method getEventProperties in Core 20af47e Fixed #239: Do not zoom/move the window when the mouse is on the left panel with group labels 5f2e3c1 Merge remote-tracking branch 'origin/develop' into develop 4fd843e Fixed #1033: Moved item data not updated in DataSet when using an asynchronous `onMove` handler 8d23446 rebuilt and updated git ignore 6cf71b3 Merge pull request #1072 from zukomgwili/develop 27a875a Corrected the shapeProperties.borderDashes property type description 8543123 Fixed #1071: HTML contents of a group not cleared when the contents is updated 77df99c Fixed #1001: First element of group style being cut faddd15 Updated history 57be317 Merge pull request #1004 from ozydingo/develop 6c502fb Added a shapeProperties object allowing configuration of shapes. 7053fda Merge pull request #1073 from sc8696/master c2b00d0 Added feature that allows the border for a circularImage shape to be dashed 789c591 Update Network.js 53446b4 Merge pull request #1069 from Rikkitp/develop ce7daf2 Udpated groupsPerformance.html 3ab17e2 Fixed node resizing on dragging. 0bbeb93 properly fixed the _lockedRedraw method dad2453 updated to 4.4.1-SNAPSHOT cae9d43 Release 4.4 113fc47 preperations for v4.4 release 296a457 fixed clustering issue #1050 34d8534 Merge pull request #1059 from felixhayashi/contrib/breadcrumbs fe9086b added breadcrumbs to all pages 23b8dfb Merge pull request #1045 from bliksemlabs/develop 76b27b5 Merge pull request #1049 from ChenMachluf/develop ec4798b Merge pull request #1046 from Tooa/improve-scaling-doc 947b2aa Remove item from subgroups in Group remove method 57237ac * Improved documentation for node and edge scaling properties. df3e876 Add the missing group reference identification to exception. ace45e6 - Added getOptionsFromConfigurator method. 78c5f38 - Added labelHighlightBold option to edges and nodes. c28051b - Added blurEdge and hoverEdge events. 1a3f63f fixed vertical dragging issue from hammer (which was found in network) in the timeline 4ad5ffa updated readme 6553b39 updated history 47d5282 Fixed #1039, icon now returns correct distance to border 103b5b1 Fixed #1044, gave navigation buttons their own handler for release. d49c27d rebuilt, fixed small bug in points 560c0f4 rebuilt, updated ignore, updated history f2092fd Merge pull request #1014 from ericvandever/develop 9d3157a Merge pull request #1030 from mschallar/mschallar/develop 11b22d3 - Fixed #1036, bug in lockedRedraw. Thanks @vges! 51e2135 Fixed multiple paths to examples 35e8e15 Updated graph2d docs for drawPoints & drawPoints.onRender 06b78a0 Updated example 19_labels.html f39c246 Updated Points.draw method to support onRender 71f875f added onRender as a drawPoints property and as a function on the object itself d51be3b Delegate the onRender function to the correct property f732674 - Fixed bug where 0 axis was always in the automatically fitted range. 0cf8c4a - Fixed updating bounding box of nodes without drawing. dc77069 added getDataSet to network manipulation edge add and edit functions to match existing remove and node equivalents f0c18f7 exposed keycharm as vis.keycharm 378c2e4 removed clear() from graph2d docs 94d63c2 updated history 04aea9e Made graph2d robust against strings for y values. b75ccba Fixed static smooth edges not being handled correctly in all angles 729ee12 Only set backgroundColor if specified in setOptions 6cf5191 added templating for groups e7bfa9c - Fixed #987 proper cleaning of support nodes. af39649 - Improved handling of empty image field. f699061 - Fixed #974 connecting static smooth and straight edges. also bug introduced in the layout 3d09e62 - No longer start stabilization with an empty node set. 4d8ade5 Fixed #953 - Added zoom events from keyboard and navigation buttons. 3507d26 Fixed #949 delete callbacks with null argument not showing toolbar afterwards. f7eee47 fixed accidental redrawing during stabilization. Fixed infinite recursion when fixing node without coordinates e23e235 fixed hammerjs direction issue 302f2f6 placed dragEnd event after restoration of fixed state of node aeba17b Fixed default value of option backgroundColor 7b31382 Ordered the options alphabetically 01a351f Fixed #970: Implemented options `dataColor`, `axisColor`, and `gridColor`. bf49a30 Bumped version number to 4.3.1-SNAPSHOT dae3c3d Released version 4.3.0 b750d2e Added css class `vis-editable`, created an example demonstrating individually editable items (see #980) 07fd970 Merge pull request #980 from danbertolini/develop 7c22bd3 Configurator is now lazy loaded in Timeline, Graph2d, and Network (see #964) 96afb72 Fixed #964: `Timeline`, `Graph2d`, and `Network` not working on IE9 79e35e3 Throw an error from abstract method `Core.prototype.getDataRange` (see #966) 2f23c2f Merge remote-tracking branch 'upstream/develop' into develop f43e935 Issues #275, #363 - individual Timeline items editable or readonly dd575ad Removed redundant code from `Core.prototype.getDataRange` (see #966) c5c221d Merge pull request #966 from mschallar/master 8fe6408 fixed #974, requesting a redraw on update in case of physics being disabled. d894d0e changing the properties from getDataRange d1e01bc returning meaningful values in getDataRange 38cdcf2 accessing the correct properties in dataRange ecb525c Improved locales validation again 8ab51a7 proper fix for validator locales 4178e4c Fixed #950: option `locales` broken in `Timeline`, `Graph2d`, and `Network` 4ddf0fe Merge remote-tracking branch 'origin/develop' into develop eef6931 Fixed #942: bug when data is empty 3c34a7d fixed dragStart, dragging and dragEnd events when nodes are selected but the viewport is dragged e2b3d2d added --SNAPSHOT to dev 0242a35 release 4.2.0 9d8ac59 rebuilt 356d5b2 Merge remote-tracking branch 'origin/develop' into develop 0987a84 - Fixed #927, dragStart event didnt contain node that was being dragged 805efd3 Fixed #925: Event `timechanged` did not fire when mouse has been moved outside the timeline. 7a41733 Fixed #923: Added a property `event` to the properties emitted with the `select` event 42596ab added physics:enabled field. Updated docs 1302a6b Fixed bug where the network could flicker when the pixelRatio is not integer. 68d432f updated build 760c3e9 changed autoResize to only draw when change is detected. 40141de added from and to to docs, fixed hoverConnectedEdges in docs a58f4e2 Added axis orientation option `'none'` 7d5ec02 Removed some redundant css files from the docs 6530614 Merge pull request #906 from btmills/master 92bf2c3 Fix broken links to docs assets 856348d Ignore lib folder in Bower package 263f21b Merge remote-tracking branch 'origin/develop' into develop 7ca06bc Removed left over console.log statement a2fd26e fixed small bug 801a71d Merge remote-tracking branch 'origin/develop' into develop 3e9cceb Fixed #897: Timeline option `{snap: null}` did give a validation error f17401c expanded docs, added buttons, fixed titles 4f17eb4 expanded docs ba5cf07 Fixed #893, #911: the `clickToUse` option of Network, Graph2d, and Network was blocking click events in the web page. 85765f9 parseFloat of edges e96d228 Added releaseFunction to openCluster. 9111c23 Fixed #908, unselecting nodes and edges now only when clicking in void. f1f6989 make sure an stabilized event is always fired atleast once. ad13323 updated history e44bc8f reverted example ab112d8 added stochastic option check to the testing. Fixed few bugs 633e689 updated docs 5ab8195 - Fixed dataView support for storePositions 5b1aecf - Fixed dataView support for storePositions a1d4b27 - fixed minor bugs 8732bee - Fixed #904, correctly parsing global font options now. d1b0c59 fixed #899, self referencing edges do not use orientation other than horizontal 0150255 - Fixed few functions including storePositions(). - Added beginnings of unit testing for network. 629e596 - Improved robustness against people molesting the Function.prototype.bind() 23c6db6 Merge remote-tracking branch 'origin/develop' into develop 34be08f - Improved robustness against people molesting the Function.prototype.bind() 80f7ac7 Updated /dist fef525b Merge remote-tracking branch 'origin/develop' into develop cedae98 Updated /dist ba5a6d2 Improved function `fit()` to take into account the actual width of items (see #847) 7771406 Reorganized `Timeline.fit()` a bit bc1d174 updated history ee24fdb Merge remote-tracking branch 'origin/develop' into develop 1cf66f6 fixed #892, added case for any format ac0563e Fit working (still needs simplification) 3970ccc Added a usage example for `getEventPropeties(event)` (see #901) 654cec3 Merge branch 'develop' into develop_fit 7d8f0a6 Merge remote-tracking branch 'origin/develop' into develop 14a5752 Replaced spdx license expression with array with identifiers for bower (see #876) 1648604 Halfway implementing improved Timeline.fit() c3ac96d Merge branch 'develop' into develop_fit d27ce7f Merge pull request #890 from Gillingham/patch-1 3e18569 Tell browserify to apply babelify transform d6a2fab Bumped version number to 4.1.1-SNAPSHOT 62a844d Released version 4.1.0 bbfe7d3 Halfway improving Timeline.fit() f70982d Renamed example 6b0a55b Deleted old docs 6ef9d20 Fixed two links a1b987b Replaced underscores in example names with camel case 7060bea Merge remote-tracking branch 'origin/develop' into develop 07c7970 Renamed an example a2de04b rebuilt, updated history facdc0b Merge remote-tracking branch 'origin/develop' into develop 50e916e removed random from physics. fixed setting hidden and physics dynamically, fixed manipulation system bug 37f93c8 Disable `yAxisOrientation` in configurator. (isn't stable) 0e915c1 Removed a broken link 1c8e8db Moved the code blocks describing event properties to the 3rd column e987f9c Put docs on importing from Gephi and DOT language under one tab 626d4b9 Fixed #877: Added support for metaKey to select multiple items. ebfb7f5 Removed accidentally committed tooltips example cb4c33a Removed promt and confirm in example with fancy looking (non-blocking) prompt/confirm 786765c Merge remote-tracking branch 'origin/develop' into develop 09bc7d0 Call event.stopPropagation() before adding or removing items (see #577) ab04dfd Merge remote-tracking branch 'origin/develop' into develop 1a741c2 code cleanup fab3215 made deselect and select nodes and edges fire more consistently 375c157 Merge remote-tracking branch 'origin/develop' into develop c3d5452 Changed license information to a spdx composite license expression 4d81920 Merge remote-tracking branch 'origin/develop' into develop e8bef2f - Fixed #884, selectNode event. 1a8a738 Added license information to package.json too (see #876) da909a8 Fixed #876: added license information to bower.json 883f924 Fixed browserify command in custom bundle example 3 4c8416d Merge pull request #880 from yetanalytics/develop 2c7473e fixed typo in clusterByHubsize 2fd1f4f - Fixed hoverNode and blurNode events and added them to the docs. 043f198 fixed getNodeAt and getEdgeAt functions 7e05e40 removed theta from docs cf36140 removed log, rebuilt db5782c - Fixed #861, brokenImage only working for one node if nodes have the same image. 9f74b3f removed log, rebuilt 5dffc93 Merge remote-tracking branch 'origin/develop' into develop 09d7d4b - Fixed bug with the moveTo and getViewPosition methods. d77275e Fixed #869: add className with id to custom time bars 520971d Merge remote-tracking branch 'origin/develop' into develop 03d0e25 Fixed #872: error about deprecated function `unsubscribe` ba6ba69 tweaked function naming 229c22b Removed depricated dynamic entree, allow any smooth curve style for hierarchical layout. 62a8f60 #870, added multiselect to the docs 9c7eba9 fixed little bug in configurator 719a16a fixed little bug in configurator b2eaf58 - Fixed clustering bug e294594 - Fixed click to use 67bda4f - Fixed #866, manipulation can now be set to false without crashing. aa12cea Fixed #860, edit node mode now works as it should. 87277e5 fixed #859. images now resize again when they are loaded. c2b07f0 fixed #858 547fb05 fixed dynamic edges not correctly handling non-existent nodes. a69269c revert example 0219c43 changed popup css to pass all mouse events. All pageX and pageY changed to clientX and clientY because the correction is done with getBoundingClientRect b6085eb Merge pull request #856 from killerDJO/develop a53bcd8 fixed colors for selected and hover states 54f99f7 fixed little bug in layoutengine and it's brother d61dd8d fixed little bug in layoutengine b6cd712 Bumped version number to 4.0.1-SNAPSHOT d6216bb Removed menu item Documentation 43b2fb5 Released version 4.0.0 c139062 Merge remote-tracking branch 'origin/v4' into v4 a3211bf Fixed description about `babel` in history 112c975 updated docs, examples, history dcc2eaf fixed path 3f6b206 fixed bug in circular images, moved examples a2236b2 Merge remote-tracking branch 'origin/v4' into v4 7099dd1 renamed getEdges to getConnectedEdges, made getConnectedNodes also work for edges c5badc2 Reorganized the Timeline examples f685d62 Renamed folder `rest` to `other` b3fe008 Fixed a bug in DataView still using the deprecated `unsubscribe` 970204b Removed index.html files from examples 1d2e92f Merge remote-tracking branch 'origin/v4' into v4 041c2c0 updated css d404798 fixed alot of bugs, expanded configurator, added more examples, updated docs, updated update interval 50f6dbc fixed bug in clustering! woohoo! added event on off once to docs. more examples 1d47ca4 Added shortcut key ctrl+enter b8502f2 fixed cluster bug ea66036 Merge remote-tracking branch 'origin/v4' into v4 ad2d70e fixed numerous clustering bugs, added more examples, numerous other bug fixes a1d9310 Some minor fixed in dotparser 23b9a91 Implemented attribute mapping for DOT language attributes f0bc4b1 Some tweaks of the DOT playground 0f35f54 Merge remote-tracking branch 'origin/v4' into v4 7ec9c91 Some tweaks of the DOT playground d829737 Reworked the dot language playground and merged with the graphviz gallery 29e0cdd Merge remote-tracking branch 'origin/v4' into v4 0b0785f more examples, more tweaks, small expansion of the validator to check locally for matches. c817962 Merge remote-tracking branch 'origin/v4' into v4 69f2e51 Added docs/data/index.html 40c11a9 more buxfixes n doc updates and default value tweaks and example tweaks 7c6979c Merge remote-tracking branch 'origin/v4' into v4 cbc4c8d fixed bugs, set all groups to reload if globally changed f51c364 DataSet and DataView now have new styling bca61e3 Fixed losing selection when changing configuration option `type` on the fly ab4e93c Minor tweak 2c8c26f Deprecated functions `DataSet.subscribe` and `DataSet.unsubscribe` c131c08 Refactored table columns "mid" 146ba57 Documented `configure` for Timeline and Graph2d. Some minor fixes in the options. 1e03f99 Merge remote-tracking branch 'origin/v4' into v4 176742b Implemented configurator for Graph2d. Fixed Configurator displaying nothing when `filter: true`. 9921fe7 worked with examples 21b76a5 Merge remote-tracking branch 'origin/v4' into v4 350f050 Doc styling tweaks df03211 rebuilt f22a096 Merge remote-tracking branch 'origin/v4' into v4 c388397 numerous bugfixes, partial progress with examples 4b47dc5 Created a folder docs/old where we will move all old docs (will remove this folder when docs are done) 7f01183 Fixed #831: items losing selection when their type changed. c5d46c1 Prefixed css classes of the TimeAxis grid (Fixed #836) f26c4ea Fixed #841: messing up clientY and pageY in event handling 14ed1bb bugfixes, added examples 0d32566 bugfixes, start of reorganisation of examples d4e7130 enabled bar style in legend 67cf954 enabled bar style in legend cb4e58e removed log e5d2692 made style work with barcharts ccbdd46 fixed bounding box bug, added function filter to configuration system 7aecbec added new solver to docs cc3e12a added another solver based on barnesHut but with some of the forceAtlas2 equations b9ff0eb added validator to graph2d, maybe also put it in groups? 20ef9a1 made new graph2d docs, fixed graph2d examples, updated graph2d options 41d51c2 added fields to docs 14c4a10 added dot and gephi parser to docs, need to include examples in the docs everywhere. Added working example code at the top of the docs and link to example 1 d9a6b41 Output error.toString() in gulpfile 88ab094 Moved validator and ConfigurationSystem to ./lib/shared, and continue with options on error 5b12f55 fixed validator (for real now) b9796e6 rebuilt b01e3d2 rebuilt 672bbd8 Merge remote-tracking branch 'origin/v4' into v4 f81b41c fixed docs (added tabs) fixed gephiparser, fixed edges, labels on selfreferenced edges, fixed dotlanguage 5b76f06 Merge remote-tracking branch 'origin/v4' into v4 d96bbe5 Some fixes in the validator fd13122 Merge remote-tracking branch 'origin/v4' into v4 85350c0 restructured networks docs again, collapsible methods f79449e Implemented option validator for Timeline f30a3a4 Integrated an option configurator 36a0822 collapsible methods, experiment... b075115 changed docs, collected methods and events d4c20ed Replaced `|` with `or` 79127d4 Added text input to ConfigurationSystem, added support for moment data type 5c0f6da rebuilt! af46198 Merge remote-tracking branch 'origin/v4' into v4 5b7a90f added multiselect, reworked options ce29f50 Implemented option `multiselect`, which is false by default a75b8e7 Fixed #716: Height of graph `2px` too large when configuring a fixed height. 5b7f264 Fixed consistently falling back to "bottom" orientation in case of invalid values 9a793f7 Fixed styling of Graph2d lines/points 6ed263b Merge remote-tracking branch 'origin/v4' into v4 dfb25f9 Collapsable sub-options 5b3f19a fixed viewable area check as per #812 f07d21f Halfway refactoring the Timeline docs b9b1974 Removed "example*" name prefix from the graph3d examples 3d4213f Added an example about orientation of axis and items, and fixed a bug in orientation of items 8effbd7 Use DataSet in example 01 9105832 Clean up test code from example 01 0c97030 Reviewed/updated all timeline examples 4fc9ffb Removed redundant file layout.html cc574a4 Fixed transparency of background items b8206c5 Removed example 21 and renamed 31 4f4fa3f Merge remote-tracking branch 'origin/v4' into v4 7e0961a - Dropped support for Google DataTable. - Dropped support for appending data returned by `DataSet.get()` to an existing Array or DataTable. - Fixed a `window` issue in uuid.js. bbb317b Merge remote-tracking branch 'origin/v4' into v4 04fb1ae added a setSize to the redraw function aee5c1e Renamed option `animate` to `animation`, and changed it to be either a boolean or an object `{duration: number, easingFunction: string}` 7f8bedf Added convenience method `setData({groups: groups, items: items})` c28e4b9 Deprecated event `finishedRedraw` as it's redundant 97de69a Fixed broken method `getEventProperties` 2929faf Deprecated option `showCustomTime`. Use method `addCustomTime()` instead. df4c200 Fixed vertical scroll shadows becoming visible when dragging an item c9a1a88 fixed all trello issues and added snazzy option lookup to validator 54c9efb Updated examples 34-39 d01112f Updated examples 32, 33 f676845 Updated some more examples e02e8e9 reverted emit 0d03373 Merge remote-tracking branch 'origin/v4' into v4 b413dd5 render issue with hierarchical layout b144a0e Some configuration fixes in example 27 a60db8c Merge remote-tracking branch 'origin/v4' into v4 6aebfcf Some updates in example 29 30 315ad7c Merge remote-tracking branch 'origin/v4' into v4 a03d926 fix manipulation bar hiding 233b5f2 Merge remote-tracking branch 'origin/v4' into v4 415fb2f Moved the worldcup data into a separate file bdf1132 fixed buttons e6480b1 Merge remote-tracking branch 'origin/v4' into v4 034d63c Updated exampled up to 24 e4b64da reverted fix, avoidance is better 3dc963c disable the 'deleting' of fixed option de5a9a7 fixed physics bug 8e91192 Merge remote-tracking branch 'origin/v4' into v4 e0a59ba fixed dashes fd29906 Merge remote-tracking branch 'origin/v4' into v4 ad088cd Updated examples 1 to 13 0d9e6b0 added docs for null and undefined. Reduced levenshtein distance threshold from 10 to 8 in validator 357853e allowed deleting values with null and undefined. Fix for global variables, fix for edge color strings 050e2da fix for sad labelless nodes 415a27a updated docs, fixed setsize message 4bc0d62 rebuilt eded5ec Merge remote-tracking branch 'origin/v4' into v4 676250f made config system fully independent of the network. b523d7e Fixed background styling issue with Graph2d 7261294 Merge remote-tracking branch 'origin/v4' into v4 7012eeb Removed option clear 0ed1bc1 new build 7d3315b Merge remote-tracking branch 'origin/v4' into v4 4d57a6d unified options with timeline, updated docs and configurator 61108f3 Renamed class `.vis-item-frame` to `.vis-item-overflow` cf8c299 Removed the option `padding` for Timeline, is now redundant (can be done purely with css now) 491e40c Merge remote-tracking branch 'origin/v4' into v4 d4ba655 Changed the 'auto' alignment of range item contents such that it always displays the left side of the conents (see #785) 7fc617f reformatted options for graph2d dataAxis, docs to follow. New docs have statically linked menu bars, switched to uuid library for uuid v4 rfc4122 UUIDs (#432) 8d48a9d fixed stacking of positive and negative bars. #616 c6171b3 rebuilt af448ca Merge remote-tracking branch 'origin/v4' into v4 99ed2be fixed align zero by rewriting that part. #728 1d3ec56 Added extra div to background items too 0585fc4 Fixed delete button not being visible 91f053c minor style fixes b825e3f unified the docs a bit 85931ba gave docs googleanalytics.js 6b770a3 fixed destroy! 2ea3b2e created shorthand for all methods 6f5bc44 docs, bugfixes efd876d debugging a bit fbf9439 moved options to network bf274fd added a pretty amazing option checker to network :) 3fbab7c updated docs partially d4d928d finalized all methods and adde3d more docs 9ecefa9 updated config ee33873 added folding to manipulation docs 7e30d2f added manipulation documentation and numerous bugfixes 5734676 added groups docs 7919d58 added clustering documentation, updated clustering to 4.0, bug fixing 0a53a4e very advanced table collapse technology introduced. 2256516 fixed bugs in hierarchical layout. Fixed bugs in configuration, added wrapper to configuration divs,, made label optional for nodes, if no label, id will be shown. Support for value arrays in deepextend. 5287b3d Merge remote-tracking branch 'origin/v4' into v4 a150b7c fixed a number of bugs in manipulation 08b6f7b Fixed vertical scroll not working in Timeline and Graph2d c48a48a added docs to branch 3d4983d Merge remote-tracking branch 'origin/v4' into v4 9218044 consistency in physics c9da1b1 Fixed clickToUse 69dbe80 Merge remote-tracking branch 'origin/v4' into v4 7ec6715 Upgraded dependencies to the latest version (including a fix in propagating-hammerjs) d600bf7 implemented error notification when not giving an unicode for the icon 2d8604b Some fixes in Timeline after merging develop 33a76d8 Merge branch 'develop' into v4 af1579b Updated test file f88863e changed the dashes options, fixed event bugs in drag ec5f644 Merge remote-tracking branch 'origin/v4' into v4 867f033 changed the dashes options, fixed bug 4eff172 Merge remote-tracking branch 'origin/v4' into v4 28f8367 Fixed the touch and release events being fired twice each time. Fixed a bug with dragging in the InteractionHandler 68b75d5 fixed css 28e4882 tweaked options, simplified edge:color:inherit option bc3e4a2 Fixed #782: Contents of items created from a template being unnecessary recreated on click, causing mouse events to get lost. 41cdb2f Merge remote-tracking branch 'origin/v4' into v4 670c8a0 Fixed issues with preventDefault and with clicking achors/buttons in items on mobile devices 6d8974b Merge remote-tracking branch 'origin/v4' into v4 06ce63e removed duplicate code cc12969 bug fixes, methods added and options changed to clean up code and to adhere to docs 48278b9 Merge remote-tracking branch 'origin/v4' into v4 3ddd43a Fixed outputting errors from webpack/babel-loader de93344 renamed option showNavigationIcons to navigationButtons 8fe1b70 fixed bug in navigation 3292c02 rebuilt 8a57330 Merge remote-tracking branch 'origin/v4' into v4 6393f3e added shadow option to nodes and edges 29ea22b Merge remote-tracking branch 'origin/v4' into v4 1e98740 Refactored css of manipulation menu 31599b9 Refactored css of network navigation 9b5fb0c rebuilt again after merge 8c1a470 Merge remote-tracking branch 'origin/v4' into v4 8d509ed rebuilt cdaf668 Renamed `unified` to `shared` 0d2cd48 Refactored css of ColorPicker and Popup 3c8d01e Merge remote-tracking branch 'origin/v4' into v4 0469a7c reworked some of the options 7c83653 Merge remote-tracking branch 'origin/v4' into v4 b3e3dcc Refactored the css of Timeline and Graph2d to have a `vis-` prefix everywhere. (Still a small issue in Graph2d) 6e7553b Merge remote-tracking branch 'origin/v4' into v4 b120443 updated option stucture to use static methods to avoid duplicate definitions ef470ff Beep on error e6dd671 Merge remote-tracking branch 'origin/v4' into v4 8613f79 Updated dependencies e881a78 replaced `6to5` with `babel`, letting webpack output errors, minor fix 517263a minor changes, adhere to ES6 in bezier edge dynamic 2d7a1b2 Merge remote-tracking branch 'origin/v4' into v4 7248587 Removed spam 88a9149 Fixed preventDefault issue with hammer.js (a brute force solution but lets see how it goes...) 45862bd Do not have the function name and argument name ef9dd9c added comments to canvas 6c61e7b Renamed Network modules to capital first letter 54c5498 improved (circular) images size handling and label positions 5f4ebd0 patched redraw requests with image load callbacks during stabilization. Fixed size option correctly working for images and circular images. 4f47608 Partly fixed issue with updating an item's subgroup (see #745) 3d29ba5 restored default width and height to 100% c8fe42e Fixed titles not working when any of the nodes has id `0`. b358087 moved the entire network to triple ===. Bugs arise in scaling 61b9513 More descriptive warning on missing locale (see #761) 5db59a9 Fixed #761: Timeline and Graph2d throwing an error when locale is not found. Gives a warning message instead. 4514e8f Released version 3.12.0 fbfe6ad Fixed offset issue with dragging items vertically when the page is scrolled (this regression was introduced a few commits back) 34a5767 The event handlers `onMove` and `onMoving` are now invoked with all item properties as argument, and can be used to update all properties (like content, className, etc) and add new properties as well 0129127 added HTML color codes c68f6d7 fixed more bugs in options, we now have a generate options button! 6bdad7e fixed bugs, restyled colorPicker f8be61d removed certain options from the interactive config. 75f5d48 bridged label object options, fixed bug with self referencing circles eec31b0 more bugfixes, setOptions now propagates shapes, smooth and font options when set globally. 9471166 bugfixes, setOptions really needs thorough testing! a30c994 finalized a very fancy option configurator with a fancy color picker for color fields! 9c32469 added color picker 681f48e basic outline for system settings exists 81ea2b1 added google analytics b954d9c start of configuration system 83a0cf1 updated option handling for manipulation system 77be45d all of the manipulation has been moved to 4.0, redone and nicely commented and cleaned up :) 39eb2e5 most of the manipulation is now in 4.0 3e3a407 Fixed issue with Dutch locale (see #736) 0975223 Fixed #736: broken script url in example 13_localization.html f7a257c Fixed #733: background items being selected on shift+click. 3180235 Merge remote-tracking branch 'origin/develop' into develop 88695a6 Removed typo in className cd3da3c fixed bugs, options, tooltip options b62d536 updated group options, icon api change b9c97e1 moved groups to v4.0, fixed some bugs in edges dc5564a moved the popup system to 4.0. Fixed #731. 5c54f27 renamed all node and edge files, added diamond shape, tweaked shapes to always align and center all shapes. this improves the labelling 4b2cc60 cleaned up code a little 26357c2 cleaned up hierarchical view to work with multiple unconnected sets 5b7c301 added edge arrow shorthand b28af6f hierarchical system is now working and original x or y values are retained 9cd6c4a fixed images, groups, circular images, repeating events cf057e7 simplified fixed for nodes, removed duplicate datachanged events with support nodes in edges a903ec4 moved arrows to baseEdge, gave the straight edge a + 50% length in the physics. 14de6f2 arrows working! 2152bd6 clustering now using new visibility model, ripped edges apart, arrows not yet functional ef39ec1 icons also working. b2178ff seperated all node styles from the main node object 3fda539 made labels seperate. Needs cleaning up and comments 53795c9 added this.options.selfReferenceSize to edge ec6a474 unified pointOnLine and pointOnBezier to pointOnEdge 4a1ae62 edges are now accepting arrows back and forth using unified code baf4cd0 altered edge option structure ca11929 put all nodes and edges into one container. keep track of indices for visible and physics activated nodes 1fbdf3b network works again! 0f850c6 Merge pull request #707 from m4r71n/labels-on-bargraph 0b90860 Fixed #708: wrong group detected when page is scrolled. e0cc8d3 Merge branch 'master' into develop 1aca8e6 Show labels on Bargraph 1c536c3 Fixed #654: removed unnecessary minimum height for groups, takes the height of the group label as minimum height now. 2cf7d10 Call `event.stopPropagation()` before callback functions like onAdd, onRemove, etc. (see #577) b9bb040 Fixed #691: Orientation can now be configured separately for axis and items. 4c6d331 Fixed support for DataSet with custom id fields (option `fieldId`). See #701. fd15b36 Added missing docs on `hiddenDates` for Graph2d (see #695) 91ff934 Updated version number to 3.11.1-SNAPSHOT 333ec38 started creation of the edges handler and the nodes handler. currently broken. cf19c22 started work on the layout engine that will handle hierarchical layouts and the initial layout 208da97 tweaks. NagivationMixin has now been ported along with keyboard bindings using keycharm. 084c194 interaction tweaks a294f98 working events like zoom and drag, testing on mobile still to be done. 165ab9a Halfway updating Network to hammer2 dcaa7ef Fixed test/timeline.html 15d0ae8 Merge branch 'v4' into hammerjs2 6c01a14 Merge branch 'develop' into hammerjs2 3541260 work in progress of porting the event handlres 57d15b6 removed event. events are used for messaging between modules. fd06e8e reasonably success in decoupling the rendering and the network by segmenting a canvas, view (for camera controls) and renderer. 714f4af physics detached from nodes and network. adacb9c migrated all of the physics to the modules 2edd8b8 removed sectors, physics is almost stand-alone. Edges need better options for physics. b91757f first step to modularize the physics engine 093cb73 first modularizing experiment. Made body object containing data nodes, emitter, support functions. ClusterEngine is the first module. 1ed569c Merge branch 'develop' into v4 978b7b6 Merge branch 'develop' into v4 dc977a7 Merge branch 'clusterRewrite' into v4 0521284 setup for modularization, move to v4 branch 2689fd3 added comments fd93236 asynchrome stabilization a9b7485 fantastic clustering in network woohoo, added point labels for bargraphs in graph2d 63be7f8 Fixed #631: invalid css names for time axis grid. Renamed hours class names from `4-8h` to `h4-h8`. a716e3f Updated /dist 261ea43 Merge branch 'develop' into v4 d07eb69 Updated history d24d45c Merge branch 'v4' into es6 e0e1de7 Upgraded to the latest version of 6to5 783af7a Changed unit tests to use the compiled vis.js 81dc764 Fixed #621: item ranges being displayed with a minimum of 10px (twice the padding). 5892bd6 Added `6to5ify` transform to the dependencies and docs on custom builds with browserify 7b55f66 Merge branch 'develop' into es6 5a8789b Added propagating-hammerjs to package.json 7e6261a Merged develop into hammer2 branch e65c8b0 Merge branch 'master' into es6 cfe3de2 Merge branch 'develop' into es6 7114d5c Added es5 to es6 transpilation step to the build script, so now we can use ES6 :) 1b75021 Network mostly working with Hammer2 bf9684d Merge branch 'develop' into hammerjs2 6818d68 Neatly using hammer2 for the delete button a56f8eb Hammer2 mostly working in the Timeline 8013a68 Merge branch 'develop' into hammerjs2 e19502e Moving Timeline working with hammer2 (stop event propagation still an issue) 3b08676 Halfway implementing hammerjs2 for Timeline git-subtree-dir: lib/vis git-subtree-split: 58f0da3921bfe60ec1b63ed833ba97573e2f6331
This commit is contained in:
laf
@@ -1,120 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Random nodes</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function destroy() {
|
||||
if (network !== null) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
destroy();
|
||||
|
||||
nodes = [];
|
||||
edges = [];
|
||||
var connectionCount = [];
|
||||
|
||||
// randomly create some nodes and edges
|
||||
var nodeCount = document.getElementById('nodeCount').value;
|
||||
for (var i = 0; i < nodeCount; i++) {
|
||||
nodes.push({
|
||||
id: i,
|
||||
label: String(i)
|
||||
});
|
||||
|
||||
connectionCount[i] = 0;
|
||||
|
||||
// create edges in a scale-free-network way
|
||||
if (i == 1) {
|
||||
var from = i;
|
||||
var to = 0;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
else if (i > 1) {
|
||||
var conn = edges.length * 2;
|
||||
var rand = Math.floor(Math.random() * conn);
|
||||
var cum = 0;
|
||||
var j = 0;
|
||||
while (j < connectionCount.length && cum < rand) {
|
||||
cum += connectionCount[j];
|
||||
j++;
|
||||
}
|
||||
|
||||
|
||||
var from = i;
|
||||
var to = j;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
}
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {stabilize:false};
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
// add event listeners
|
||||
network.on('select', function(params) {
|
||||
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
|
||||
});
|
||||
network.on('stabilized', function (params) {
|
||||
document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
|
||||
});
|
||||
network.on('startStabilization', function (params) {
|
||||
document.getElementById('stabilization').innerHTML = 'Stabilizing...';
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<form onsubmit="draw(); return false;">
|
||||
<label for="nodeCount">Number of nodes:</label>
|
||||
<input id="nodeCount" type="text" value="25" style="width: 50px;">
|
||||
<input type="submit" value="Go">
|
||||
</form>
|
||||
|
||||
<br>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<p id="selection"></p>
|
||||
<p id="stabilization"></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,77 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Shapes</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt arial;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function draw() {
|
||||
nodes = [
|
||||
{id: 1, label: 'circle', shape: 'circle', group: 'group_x'},
|
||||
{id: 2, label: 'ellipse', shape: 'ellipse', group: 'group_x'},
|
||||
{id: 3, label: 'database', shape: 'database', group: 'group_x'},
|
||||
{id: 4, label: 'box', shape: 'box', group: 'group_x'}
|
||||
];
|
||||
|
||||
edges = [
|
||||
{from: 3, to: 1, style: 'arrow'},
|
||||
{from: 1, to: 4, style: 'dash-line'},
|
||||
{from: 1, to: 2, style: 'arrow-center'}
|
||||
];
|
||||
|
||||
var mainId = 5;
|
||||
nodes.push({id: mainId, label: 'shapes\nand\nsizes', shape: 'box', group: 'group_main'});
|
||||
var shapes = ['dot', 'square', 'triangle', 'triangleDown', 'star'];
|
||||
var id = 6;
|
||||
for (var size = 1; size < 4; size++) {
|
||||
var groupId = id;
|
||||
nodes.push({id: id, label: 'size ' + size, shape: 'box', group: 'group' + size});
|
||||
edges.push({from: mainId, to: groupId, color: 'gray', width: size});
|
||||
id++;
|
||||
|
||||
for (var i in shapes) {
|
||||
if (shapes.hasOwnProperty(i)) {
|
||||
nodes.push({id: id, value: size, label: shapes[i], shape: shapes[i], group: 'group' + size});
|
||||
edges.push({from: groupId, to: id, color: 'gray', width: size});
|
||||
id++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
stabilize: false
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<div id="info"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,79 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Social Network</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font: 10pt arial;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
background: #F3F3F3;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var DIR = 'img/soft-scraps-icons/';
|
||||
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function draw() {
|
||||
// create people
|
||||
nodes = [
|
||||
{id: 1, label: 'Algie', image: DIR + 'Smiley-Angry-icon.png', shape: 'image'},
|
||||
{id: 2, label: 'Alston', image: DIR + 'Smiley-Grin-icon.png', shape: 'image'},
|
||||
{id: 3, label: 'Barney', image: DIR + 'User-Administrator-Blue-icon.png', shape: 'image'},
|
||||
{id: 4, label: 'Coley', image: DIR + 'User-Administrator-Green-icon.png', shape: 'image'},
|
||||
{id: 5, label: 'Grant', image: DIR + 'User-Coat-Blue-icon.png', shape: 'image'},
|
||||
{id: 6, label: 'Langdon', image: DIR + 'User-Coat-Green-icon.png', shape: 'image'},
|
||||
{id: 7, label: 'Lee', image: DIR + 'User-Coat-Red-icon.png', shape: 'image'},
|
||||
{id: 8, label: 'Merlin', image: DIR + 'User-Executive-Green-icon.png', shape: 'image'},
|
||||
{id: 9, label: 'Mick', image: DIR + 'User-Preppy-Blue-icon.png', shape: 'image'},
|
||||
{id: 10, label: 'Tod', image: DIR + 'User-Preppy-Red-icon.png', shape: 'image'}
|
||||
];
|
||||
|
||||
// create connections
|
||||
var color = '#BFBFBF';
|
||||
edges = [
|
||||
{from: 2, to: 8, value: 3, label: 3, color: color},
|
||||
{from: 2, to: 9, value: 5, label: 5, color: color},
|
||||
{from: 2, to: 10, value: 1, label: 1, color: color},
|
||||
{from: 4, to: 6, value: 8, label: 8, color: color},
|
||||
{from: 5, to: 7, value: 2, label: 2, color: color},
|
||||
{from: 4, to: 5, value: 1, label: 1, color: color},
|
||||
{from: 9, to: 10, value: 2, label: 2, color: color},
|
||||
{from: 2, to: 3, value: 6, label: 6, color: color},
|
||||
{from: 3, to: 9, value: 4, label: 4, color: color},
|
||||
{from: 5, to: 3, value: 1, label: 1, color: color},
|
||||
{from: 2, to: 7, value: 4, label: 4, color: color}
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
<div id="mynetwork"></div>
|
||||
<p>
|
||||
Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a>
|
||||
</p>
|
||||
|
||||
<div id="info"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,170 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Groups</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font: 10pt arial;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 1900px;
|
||||
height: 900px;
|
||||
border: 1px solid lightgray;
|
||||
background-color:#222222;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
var nodesData = null;
|
||||
|
||||
google.load('visualization', '1');
|
||||
|
||||
// Set callback to run when API is loaded
|
||||
google.setOnLoadCallback(draw);
|
||||
|
||||
function destroy() {
|
||||
if (network !== null) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function draw() {
|
||||
destroy();
|
||||
|
||||
var from, to;
|
||||
|
||||
nodes = [];
|
||||
edges = [];
|
||||
|
||||
var color = 'gray';
|
||||
var len = undefined;
|
||||
|
||||
// randomly create some nodes
|
||||
var nodeCount = parseInt(document.getElementById('nodeCount').value);
|
||||
var nodeOffset = 0;
|
||||
var groupMin = 0;
|
||||
var groupMax = parseInt(document.getElementById('groupCount').value);
|
||||
var group = groupMin;
|
||||
var groupLeader = []; // will contain the node id with the most links of each group
|
||||
while (group < groupMax) {
|
||||
// randomly create some nodes
|
||||
var i = 0;
|
||||
var cols = parseInt(Math.sqrt(nodeCount));
|
||||
var connectionCount = [];
|
||||
while (i < nodeCount) {
|
||||
nodes.push({
|
||||
id: i + nodeOffset,
|
||||
label: String(i + nodeOffset),
|
||||
group: group
|
||||
});
|
||||
connectionCount[i] = 0;
|
||||
|
||||
// create links in a scale-free-network way
|
||||
if (i == 1) {
|
||||
from = i;
|
||||
to = 0;
|
||||
edges.push({
|
||||
from: from + nodeOffset,
|
||||
to: to + nodeOffset,
|
||||
length: len
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
else if (i > 1) {
|
||||
var conn = (i - 1) * 2;
|
||||
var rand = Math.floor(Math.random() * conn);
|
||||
var cum = 0;
|
||||
var j = 0;
|
||||
while (j < connectionCount.length && cum < rand) {
|
||||
cum += connectionCount[j];
|
||||
j++;
|
||||
}
|
||||
|
||||
from = i;
|
||||
to = j;
|
||||
edges.push({
|
||||
from: from + nodeOffset,
|
||||
to: to + nodeOffset,
|
||||
length: len
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
|
||||
i++;
|
||||
}
|
||||
|
||||
// calculate the node with the most number of connections
|
||||
var leader = 0;
|
||||
for (var c in connectionCount) {
|
||||
if (connectionCount.hasOwnProperty(c)) {
|
||||
if (connectionCount[c] > connectionCount[leader]) {
|
||||
leader = parseInt(c);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (group > groupMin) {
|
||||
// connect to the leader of this group to the leader of a random other group
|
||||
from = leader + nodeOffset;
|
||||
to = groupLeader[groupMin + parseInt(Math.random() * (group - groupMin))];
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to,
|
||||
length: len
|
||||
});
|
||||
}
|
||||
|
||||
// add this leader to the list
|
||||
groupLeader[group] = leader + nodeOffset;
|
||||
|
||||
nodeOffset += nodeCount;
|
||||
group++;
|
||||
}
|
||||
nodesData = new vis.DataSet(nodes);
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodesData,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
stabilize: true,
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
radius:30,
|
||||
fontColor:'#ffffff',
|
||||
borderWidth:2
|
||||
},
|
||||
physics: {barnesHut:{springLength: 100}}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
<form onsubmit= "javascript: draw(); return false;">
|
||||
Number of groups:
|
||||
<input type="text" value="20" id="groupCount" style="width: 50px;">
|
||||
Number of nodes per group:
|
||||
<input type="text" value="1" id="nodeCount" style="width: 50px;">
|
||||
<input type="submit" value="Go">
|
||||
</form>
|
||||
<br>
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,109 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Mobile friendly</title>
|
||||
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
font: 10pt arial;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#mynetwork {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- for mobile devices like android and iphone -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function draw() {
|
||||
nodes = [];
|
||||
edges = [];
|
||||
var EDGE_LENGTH = 50;
|
||||
var connectionCount = [];
|
||||
|
||||
// randomly create some nodes
|
||||
var nodeCount = 20;
|
||||
var cols = parseInt(Math.sqrt(nodeCount));
|
||||
for (var i = 0; i < nodeCount; i++) {
|
||||
nodes.push({
|
||||
id: i,
|
||||
label: '' + i
|
||||
});
|
||||
|
||||
connectionCount[i] = 0;
|
||||
|
||||
// create links in a scale-free-network way
|
||||
if (i == 1) {
|
||||
var from = i;
|
||||
var to = 0;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to,
|
||||
length: EDGE_LENGTH
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
else if (i > 1) {
|
||||
var conn = edges.length * 2;
|
||||
var rand = Math.floor(Math.random() * conn);
|
||||
var cum = 0;
|
||||
var j = 0;
|
||||
while (j < connectionCount.length && cum < rand) {
|
||||
cum += connectionCount[j];
|
||||
j++;
|
||||
}
|
||||
|
||||
var from = i;
|
||||
var to = j;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to,
|
||||
length: EDGE_LENGTH
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
}
|
||||
|
||||
// Create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
stabilize: false,
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
radius: 24,
|
||||
fontSize: 24
|
||||
},
|
||||
edges: {
|
||||
width: 2
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw()" onresize="network.redraw();">
|
||||
<div id="mynetwork"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,132 +0,0 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Custom style</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt arial;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var options = null;
|
||||
var network = null;
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function draw() {
|
||||
// create nodes
|
||||
nodes = [
|
||||
{id: 1, label: 'black node', group: 'black'},
|
||||
{id: 2, label: 'black node', group: 'black'},
|
||||
{id: 3, label: 'black node', group: 'black'},
|
||||
{id: 4, label: 'red node', group: 'black', color: 'red'},
|
||||
{id: 5, label: 'gray node', group: 'gray'},
|
||||
{id: 6, label: 'gray node', group: 'gray'},
|
||||
{id: 7, label: 'gray node', group: 'gray'},
|
||||
{id: 8, label: 'gray node', group: 'gray'},
|
||||
{id: 9, label: 'image node', group: 'white'},
|
||||
{id: 10, label: 'image node', group: 'white'},
|
||||
{id: 11, label: 'default node'},
|
||||
{id: 12, label: 'default node'}
|
||||
];
|
||||
|
||||
// create edges
|
||||
edges = [
|
||||
{from: 1, to: 2},
|
||||
{from: 1, to: 3},
|
||||
{from: 1, to: 4},
|
||||
{from: 5, to: 6},
|
||||
{from: 5, to: 7},
|
||||
{from: 5, to: 8},
|
||||
{from: 9, to: 10},
|
||||
{from: 9, to: 11},
|
||||
{from: 9, to: 12},
|
||||
|
||||
{from: 1, to: 5},
|
||||
{from: 5, to: 9},
|
||||
{from: 9, to: 1}
|
||||
];
|
||||
|
||||
// specify options
|
||||
options = {
|
||||
stabilize: false,
|
||||
edges: {
|
||||
width: 2,
|
||||
style: 'arrow',
|
||||
color: 'gray'
|
||||
},
|
||||
nodes: {
|
||||
// default for all nodes
|
||||
fontFace: 'times',
|
||||
shape: 'circle',
|
||||
color: {
|
||||
border: 'orange',
|
||||
background: 'yellow',
|
||||
highlight: {
|
||||
border: 'darkorange',
|
||||
background: 'gold'
|
||||
}
|
||||
}
|
||||
},
|
||||
physics: {barnesHut:{springLength:200}}, // this is the correct way to set the length of the springs
|
||||
groups: {
|
||||
black: {
|
||||
// defaults for nodes in this group
|
||||
radius: 15,
|
||||
color: 'black',
|
||||
fontColor: 'white',
|
||||
fontSize: 18,
|
||||
fontFace: 'courier',
|
||||
shape: 'rect'
|
||||
},
|
||||
gray: {
|
||||
color: {
|
||||
border: 'black',
|
||||
background: 'gray',
|
||||
highlight: {
|
||||
border: 'black',
|
||||
background: 'lightgray'
|
||||
}
|
||||
},
|
||||
fontSize: 18,
|
||||
fontFace: 'arial',
|
||||
shape: 'circle'
|
||||
},
|
||||
white: {
|
||||
color: {
|
||||
border: 'black',
|
||||
background: 'white'
|
||||
},
|
||||
fontColor: 'red',
|
||||
shape: 'image',
|
||||
image: 'img/soft-scraps-icons/User-Coat-Blue-icon.png'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// create the network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
<div id="mynetwork"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,86 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Scalable images</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt arial;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var DIR = 'img/soft-scraps-icons/';
|
||||
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function draw() {
|
||||
// create people.
|
||||
// value corresponds with the age of the person
|
||||
var DIR = 'img/soft-scraps-icons/';
|
||||
nodes = [
|
||||
{id: 1, value: 2, shape: 'image', label: 'Algie', title: 'Algie (2 years old)', image: DIR + 'Smiley-Angry-icon.png'},
|
||||
{id: 2, value: 31, shape: 'image', label: 'Alston', title: 'Alston (31 years old)', image: DIR + 'Smiley-Grin-icon.png'},
|
||||
{id: 3, value: 12, shape: 'image', label: 'Barney', title: 'Barney (12 years old)', image: DIR + 'User-Administrator-Blue-icon.png'},
|
||||
{id: 4, value: 16, shape: 'image', label: 'Coley', title: 'Coley (16 years old)', image: DIR + 'User-Administrator-Green-icon.png'},
|
||||
{id: 5, value: 17, shape: 'image', label: 'Grant', title: 'Grant (17 years old)', image: DIR + 'User-Coat-Blue-icon.png'},
|
||||
{id: 6, value: 15, shape: 'image', label: 'Langdon', title: 'Langdon (15 years old)', image: DIR + 'User-Coat-Green-icon.png'},
|
||||
{id: 7, value: 6, shape: 'image', label: 'Lee', title: 'Lee (6 years old)', image: DIR + 'User-Coat-Red-icon.png'},
|
||||
{id: 8, value: 5, shape: 'image', label: 'Merlin', title: 'Merlin (5 years old)', image: DIR + 'User-Executive-Green-icon.png'},
|
||||
{id: 9, value: 30, shape: 'image', label: 'Mick', title: 'Mick (30 years old)', image: DIR + 'User-Preppy-Blue-icon.png'},
|
||||
{id: 10, value: 18, shape: 'image', label: 'Tod', title: 'Tod (18 years old)', image: DIR + 'User-Preppy-Red-icon.png'}
|
||||
];
|
||||
|
||||
// create connetions between people
|
||||
// value corresponds with the amount of contact between two people
|
||||
edges = [
|
||||
{from: 2, to: 8, value: 3, title: '3 emails per week'},
|
||||
{from: 2, to: 9, value: 5, title: '5 emails per week'},
|
||||
{from: 2, to: 10,value: 1, title: '1 emails per week'},
|
||||
{from: 4, to: 6, value: 8, title: '8 emails per week'},
|
||||
{from: 5, to: 7, value: 2, title: '2 emails per week'},
|
||||
{from: 4, to: 5, value: 1, title: '1 emails per week'},
|
||||
{from: 9, to: 10,value: 2, title: '2 emails per week'},
|
||||
{from: 2, to: 3, value: 6, title: '6 emails per week'},
|
||||
{from: 3, to: 9, value: 4, title: '4 emails per week'},
|
||||
{from: 5, to: 3, value: 1, title: '1 emails per week'},
|
||||
{from: 2, to: 7, value: 4, title: '4 emails per week'}
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
widthMin: 20, // min width in pixels
|
||||
widthMax: 100 // max width in pixels
|
||||
},
|
||||
edges: {
|
||||
color: 'lightgray'
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<div id="info"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,64 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Dashed lines</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
// Called on page load
|
||||
function draw() {
|
||||
var nodes = [
|
||||
{id: 1, label: 'dashed\nline\nexamples'},
|
||||
{id: 2, label: 'default'},
|
||||
{id: 3, label: 'dash.length: 20\ndash.gap: 20'},
|
||||
{id: 4, label: 'dash.length: 20\ndash.gap: 5'},
|
||||
{id: 5, label: 'dash.length: 5\ndash.gap: 20'},
|
||||
{id: 6, label: 'dash.length: 20\ndash.gap: 5\ndash.altLength: 5'}
|
||||
];
|
||||
var edges = [
|
||||
{from: 1, to: 2, style: 'dash-line'},
|
||||
{from: 1, to: 3, style: 'dash-line', dash: {length: 20, gap: 20}},
|
||||
{from: 1, to: 4, style: 'dash-line', dash: {length: 20, gap: 5}},
|
||||
{from: 1, to: 5, style: 'dash-line', dash: {length: 5, gap: 20}},
|
||||
{from: 1, to: 6, style: 'dash-line', dash: {length: 20, gap: 5, altLength: 5}}
|
||||
];
|
||||
|
||||
// create the network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'box'
|
||||
},
|
||||
physics: {barnesHut:{springLength:150}}, // this is the correct way to set the length of the springs
|
||||
stabilize: false
|
||||
};
|
||||
var network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<p>
|
||||
This example shows the different options for dashed lines.
|
||||
</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,19 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | DOT Language</title>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
dot: 'dinetwork {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
|
||||
};
|
||||
var network = new vis.Network(container, data);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,212 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | DOT language playground</title>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
body, html {
|
||||
font: 10pt sans;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
#frame {
|
||||
width: 100%;
|
||||
height: 99%;
|
||||
}
|
||||
#frame td {
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
#error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#data {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #d3d3d3;
|
||||
}
|
||||
|
||||
#mynetwork {
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #d3d3d3;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
textarea.example {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="drawExample('example1')">
|
||||
|
||||
<table id="frame">
|
||||
<col width="50%">
|
||||
<col width="50%">
|
||||
<tr>
|
||||
<td colspan="2" style="height: 50px;">
|
||||
<h1>DOT language playground</h1>
|
||||
<div>
|
||||
<a href="javascript: drawExample('example1')">example 1</a>
|
||||
<a href="javascript: drawExample('example2')">example 2</a>
|
||||
<a href="javascript: drawExample('example3')">example 3</a>
|
||||
</div>
|
||||
<div>
|
||||
<br>
|
||||
<button id="draw">Draw</button>
|
||||
<span id="error"></span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<textarea id="data"></textarea>
|
||||
</td>
|
||||
<td>
|
||||
<div id="mynetwork"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<script type="text/javascript">
|
||||
var network = null;
|
||||
var data = null;
|
||||
|
||||
var btnDraw = document.getElementById('draw');
|
||||
var txtData = document.getElementById('data');
|
||||
var txtError = document.getElementById('error');
|
||||
btnDraw.onclick = draw;
|
||||
|
||||
// resize the network when window resizes
|
||||
window.onresize = function () {
|
||||
network.redraw()
|
||||
};
|
||||
|
||||
function destroy() {
|
||||
if (network !== null) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
}
|
||||
|
||||
// parse and draw the data
|
||||
function draw () {
|
||||
destroy();
|
||||
try {
|
||||
txtError.innerHTML = '';
|
||||
|
||||
// Provide a string with data in DOT language
|
||||
data = {
|
||||
dot: txtData.value
|
||||
};
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var options = {};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
catch (err) {
|
||||
// set the cursor at the position where the error occurred
|
||||
var match = /\(char (.*)\)/.exec(err);
|
||||
if (match) {
|
||||
var pos = Number(match[1]);
|
||||
if(txtData.setSelectionRange) {
|
||||
txtData.focus();
|
||||
txtData.setSelectionRange(pos, pos);
|
||||
}
|
||||
}
|
||||
|
||||
// show an error message
|
||||
txtError.innerHTML = err.toString();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Draw an example
|
||||
* @param {String} id HTML id of the textarea containing the example code
|
||||
*/
|
||||
function drawExample(id) {
|
||||
txtData.value = document.getElementById(id).value;
|
||||
draw();
|
||||
}
|
||||
</script>
|
||||
|
||||
<textarea id="example1" class="example">
|
||||
digraph {
|
||||
node [shape=circle fontSize=16]
|
||||
edge [length=100, color=gray, fontColor=black]
|
||||
|
||||
A -> A[label=0.5];
|
||||
B -> B[label=1.2] -> C[label=0.7] -- A;
|
||||
B -> D;
|
||||
D -> {B; C}
|
||||
D -> E[label=0.2];
|
||||
F -> F;
|
||||
A [
|
||||
fontColor=white,
|
||||
color=red,
|
||||
]
|
||||
}
|
||||
</textarea>
|
||||
|
||||
<textarea id="example2" class="example">
|
||||
digraph topology
|
||||
{
|
||||
node[shape=circle fontSize=12]
|
||||
edge[length=170 fontSize=12]
|
||||
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
|
||||
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
|
||||
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
|
||||
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
|
||||
"10.0.255.2" -> "10.0.255.1"[label="1.000"];
|
||||
"10.0.255.2" -> "10.0.255.3"[label="1.000"];
|
||||
"10.0.255.3" -> "10.0.255.1"[label="1.000"];
|
||||
"10.0.255.3" -> "10.0.255.2"[label="1.000"];
|
||||
"10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
|
||||
"10.0.3.0/24"[shape=box];
|
||||
"10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
|
||||
"10.0.2.0/24"[shape=box];
|
||||
"10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
|
||||
"10.0.1.0/24"[shape=box];
|
||||
}
|
||||
</textarea>
|
||||
|
||||
<textarea id="example3" class="example">
|
||||
digraph G {
|
||||
// note: not all attributes are recognized and supported by Network
|
||||
// unrecognized attributes are ignored
|
||||
|
||||
node[width=.25,height=.375,fontsize=15]
|
||||
node [shape=filled fillcolor=#F1AAF0]
|
||||
0-> 0 ;
|
||||
1-> 1 ;
|
||||
2-> 2 ;
|
||||
3-> 3 ;
|
||||
4-> 4 ;
|
||||
5-> 5 ;
|
||||
6-> 6 ;
|
||||
7-> 5 ;
|
||||
8-> 8 ;
|
||||
9-> 9 ;
|
||||
10-> 10 ;
|
||||
11-> 10 ;
|
||||
12-> 12 ;
|
||||
13-> 5 ;
|
||||
14-> 10 ;
|
||||
15-> 0 ;
|
||||
}
|
||||
</textarea>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,266 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | DataSet</title>
|
||||
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
font: 11pt arial;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 150%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
table.view {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
table table {
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
table table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type=text], pre {
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
#network {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes, edges, network;
|
||||
|
||||
// convenience method to stringify a JSON object
|
||||
function toJSON (obj) {
|
||||
return JSON.stringify(obj, null, 4);
|
||||
}
|
||||
|
||||
$(window).load(function () {
|
||||
// attach actions to the node buttons
|
||||
$('#node-add').click(function () {
|
||||
try {
|
||||
nodes.add({
|
||||
id: $('#node-id').val(),
|
||||
label: $('#node-label').val()
|
||||
});
|
||||
}
|
||||
catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
});
|
||||
$('#node-update').click(function () {
|
||||
try {
|
||||
nodes.update({
|
||||
id: $('#node-id').val(),
|
||||
label: $('#node-label').val()
|
||||
});
|
||||
}
|
||||
catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
});
|
||||
$('#node-remove').click(function () {
|
||||
try {
|
||||
var id = $('#node-id').val();
|
||||
nodes.remove(id);
|
||||
}
|
||||
catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
});
|
||||
|
||||
// attach actions to the edge buttons
|
||||
$('#edge-add').click(function () {
|
||||
try {
|
||||
edges.add({
|
||||
id: $('#edge-id').val(),
|
||||
from: $('#edge-from').val(),
|
||||
to: $('#edge-to').val()
|
||||
});
|
||||
}
|
||||
catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
});
|
||||
$('#edge-update').click(function () {
|
||||
try {
|
||||
edges.update({
|
||||
id: $('#edge-id').val(),
|
||||
from: $('#edge-from').val(),
|
||||
to: $('#edge-to').val()
|
||||
});
|
||||
}
|
||||
catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
});
|
||||
$('#edge-remove').click(function () {
|
||||
try {
|
||||
var id = $('#edge-id').val();
|
||||
edges.remove(id);
|
||||
}
|
||||
catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
});
|
||||
|
||||
// create an array with nodes
|
||||
nodes = new vis.DataSet();
|
||||
nodes.subscribe('*', function () {
|
||||
$('#nodes').html(toJSON(nodes.get()));
|
||||
});
|
||||
nodes.add([
|
||||
{id: '1', label: 'Node 1'},
|
||||
{id: '2', label: 'Node 2'},
|
||||
{id: '3', label: 'Node 3'},
|
||||
{id: '4', label: 'Node 4'},
|
||||
{id: '5', label: 'Node 5'}
|
||||
]);
|
||||
|
||||
// create an array with edges
|
||||
edges = new vis.DataSet();
|
||||
edges.subscribe('*', function () {
|
||||
$('#edges').html(toJSON(edges.get()));
|
||||
});
|
||||
edges.add([
|
||||
{id: '1', from: '1', to: '2'},
|
||||
{id: '2', from: '1', to: '3'},
|
||||
{id: '3', from: '2', to: '4'},
|
||||
{id: '4', from: '2', to: '5'}
|
||||
]);
|
||||
|
||||
// create a network
|
||||
var container = $('#network').get(0);
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {};
|
||||
network = new vis.Network(container, data, options);
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>
|
||||
This example demonstrates dynamically adding, updating and removing nodes
|
||||
and edges using a DataSet.
|
||||
</p>
|
||||
|
||||
<h1>Adjust</h1>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<h2>Node</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><label for="node-id">Id</label></td>
|
||||
<td><input id="node-id" type="text" value="6"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><label for="node-label">Label</label></td>
|
||||
<td><input id="node-label" type="text" value="Node 6"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Action</td>
|
||||
<td>
|
||||
<button id="node-add">Add</button>
|
||||
<button id="node-update">Update</button>
|
||||
<button id="node-remove">Remove</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<h2>Edge</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><label for="edge-id">Id</label></td>
|
||||
<td><input id="edge-id" type="text" value="5"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><label for="edge-from">From</label></td>
|
||||
<td><input id="edge-from" type="text" value="3"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><label for="edge-to">To</label></td>
|
||||
<td><input id="edge-to" type="text" value="4"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Action</td>
|
||||
<td>
|
||||
<button id="edge-add">Add</button>
|
||||
<button id="edge-update">Update</button>
|
||||
<button id="edge-remove">Remove</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<h1>View</h1>
|
||||
<table class="view">
|
||||
<colgroup>
|
||||
<col width="25%">
|
||||
<col width="25%">
|
||||
<col width="50%">
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
<h2>Nodes</h2>
|
||||
<pre id="nodes"></pre>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<h2>Edges</h2>
|
||||
<pre id="edges"></pre>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<h2>Network</h2>
|
||||
<div id="network"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,110 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Fully random nodes clustering</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function destroy() {
|
||||
if (network !== null) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
destroy();
|
||||
|
||||
nodes = [];
|
||||
edges = [];
|
||||
// randomly create some nodes and edges
|
||||
var nodeCount = parseInt(document.getElementById('nodeCount').value);
|
||||
|
||||
for (var i = 0; i < nodeCount; i++) {
|
||||
nodes.push({
|
||||
id: i,
|
||||
label: String(i)
|
||||
});
|
||||
}
|
||||
for (var i = 0; i < nodeCount; i++) {
|
||||
var from = i;
|
||||
var to = i;
|
||||
to = i;
|
||||
while (to == i) {
|
||||
to = Math.floor(Math.random() * (nodeCount));
|
||||
}
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
}
|
||||
// create a network
|
||||
var clusteringOn = document.getElementById('clustering').checked;
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
physics: {barnesHut:{springLength:120}}, // this is the correct way to set the length of the springs
|
||||
clustering: {
|
||||
enabled: clusteringOn
|
||||
},
|
||||
stabilize: false
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
// add event listeners
|
||||
network.on('select', function(params) {
|
||||
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<h2>Clustering - Fully random network</h2>
|
||||
<div style="width:700px; font-size:14px; text-align: justify;">
|
||||
This example shows a fully randomly generated set of nodes and connected edges.
|
||||
By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
|
||||
a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
|
||||
<br />
|
||||
<br />
|
||||
Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance
|
||||
will be created and the cluster contents will only be simulated in there. Double click will also open a cluster.
|
||||
<br />
|
||||
<br />
|
||||
Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset.
|
||||
</div>
|
||||
<br />
|
||||
<form onsubmit="draw(); return false;">
|
||||
<label for="nodeCount">Number of nodes:</label>
|
||||
<input id="nodeCount" type="text" value="50" style="width: 50px;">
|
||||
<label for="clustering">Enable Clustering:</label>
|
||||
<input id="clustering" type="checkbox" onChange="draw()" checked="true">
|
||||
<input type="submit" value="Go">
|
||||
</form>
|
||||
<br>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<p id="selection"></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,137 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Scale free network clustering</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function destroy() {
|
||||
if (network !== null) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
destroy();
|
||||
|
||||
nodes = [];
|
||||
edges = [];
|
||||
var connectionCount = [];
|
||||
|
||||
// randomly create some nodes and edges
|
||||
var nodeCount = document.getElementById('nodeCount').value;
|
||||
for (var i = 0; i < nodeCount; i++) {
|
||||
nodes.push({
|
||||
id: i,
|
||||
label: String(i)
|
||||
});
|
||||
|
||||
connectionCount[i] = 0;
|
||||
|
||||
// create edges in a scale-free-network way
|
||||
if (i == 1) {
|
||||
var from = i;
|
||||
var to = 0;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
else if (i > 1) {
|
||||
var conn = edges.length * 2;
|
||||
var rand = Math.floor(Math.random() * conn);
|
||||
var cum = 0;
|
||||
var j = 0;
|
||||
while (j < connectionCount.length && cum < rand) {
|
||||
cum += connectionCount[j];
|
||||
j++;
|
||||
}
|
||||
|
||||
var from = i;
|
||||
var to = j;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
}
|
||||
|
||||
// create a network
|
||||
var clusteringOn = document.getElementById('clustering').checked;
|
||||
var clusterEdgeThreshold = parseInt(document.getElementById('clusterEdgeThreshold').value);
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
clustering: {
|
||||
enabled: clusteringOn,
|
||||
clusterEdgeThreshold: clusterEdgeThreshold
|
||||
},
|
||||
stabilize: false
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
// add event listeners
|
||||
network.on('select', function(params) {
|
||||
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<h2>Clustering - Scale-Free-Network</h2>
|
||||
<div style="width:700px; font-size:14px; text-align: justify;">
|
||||
This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
|
||||
By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
|
||||
a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
|
||||
<br />
|
||||
<br />
|
||||
Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance
|
||||
will be created and the cluster contents will only be simulated in there. Double click will also open a cluster.
|
||||
<br />
|
||||
<br />
|
||||
Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset.
|
||||
Experiment with the clusterEdgeThreshold, which increases the formation of clusters when zoomed out (assuming the checkbox is checked).
|
||||
</div>
|
||||
<br />
|
||||
<form onsubmit="draw(); return false;">
|
||||
<label for="nodeCount">Number of nodes:</label>
|
||||
<input id="nodeCount" type="text" value="125" style="width: 50px;">
|
||||
<label for="clustering">Enable Clustering:</label>
|
||||
<input id="clustering" type="checkbox" onChange="draw()" checked="true">
|
||||
<label for="clusterEdgeThreshold">clusterEdgeThreshold:</label>
|
||||
<input id="clusterEdgeThreshold" type="text" value="20" style="width: 50px;">
|
||||
<input type="submit" value="Go">
|
||||
</form>
|
||||
<br>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<p id="selection"></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,177 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Navigation</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
table.legend_table {
|
||||
font-size: 11px;
|
||||
border-width:1px;
|
||||
border-color:#d3d3d3;
|
||||
border-style:solid;
|
||||
}
|
||||
table.legend_table,td {
|
||||
border-width:1px;
|
||||
border-color:#d3d3d3;
|
||||
border-style:solid;
|
||||
padding: 2px;
|
||||
}
|
||||
div.table_content {
|
||||
width:80px;
|
||||
text-align:center;
|
||||
}
|
||||
div.table_description {
|
||||
width:100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../dist/vis.css">
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function destroy() {
|
||||
if (network !== null) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
destroy();
|
||||
|
||||
nodes = [];
|
||||
edges = [];
|
||||
var connectionCount = [];
|
||||
|
||||
// randomly create some nodes and edges
|
||||
var nodeCount = document.getElementById('nodeCount').value;
|
||||
for (var i = 0; i < nodeCount; i++) {
|
||||
nodes.push({
|
||||
id: i,
|
||||
label: String(i)
|
||||
});
|
||||
|
||||
connectionCount[i] = 0;
|
||||
|
||||
// create edges in a scale-free-network way
|
||||
if (i == 1) {
|
||||
var from = i;
|
||||
var to = 0;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
else if (i > 1) {
|
||||
var conn = edges.length * 2;
|
||||
var rand = Math.floor(Math.random() * conn);
|
||||
var cum = 0;
|
||||
var j = 0;
|
||||
while (j < connectionCount.length && cum < rand) {
|
||||
cum += connectionCount[j];
|
||||
j++;
|
||||
}
|
||||
|
||||
var from = i;
|
||||
var to = j;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
}
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
stabilize: false,
|
||||
navigation: true,
|
||||
keyboard: true
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
// add event listeners
|
||||
network.on('select', function(params) {
|
||||
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<h2>Navigation controls and keyboad navigation</h2>
|
||||
<div style="width: 800px; font-size:14px; text-align: justify;">
|
||||
This example is the same as example 2, except for the navigation controls that have been activated. The navigation controls are described below. <br /><br />
|
||||
<table class="legend_table">
|
||||
<tr>
|
||||
<td>Icons: </td>
|
||||
<td><div class="table_content"><img src="../../dist/img/network/upArrow.png" /> </div></td>
|
||||
<td><div class="table_content"><img src="../../dist/img/network/downArrow.png" /> </div></td>
|
||||
<td><div class="table_content"><img src="../../dist/img/network/leftArrow.png" /> </div></td>
|
||||
<td><div class="table_content"><img src="../../dist/img/network/rightArrow.png" /> </div></td>
|
||||
<td><div class="table_content"><img src="../../dist/img/network/plus.png" /> </div></td>
|
||||
<td><div class="table_content"><img src="../../dist/img/network/minus.png" /> </div></td>
|
||||
<td><div class="table_content"><img src="../../dist/img/network/zoomExtends.png" /> </div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="table_description">Keyboard shortcuts:</div></td>
|
||||
<td><div class="table_content">Up arrow</div></td>
|
||||
<td><div class="table_content">Down arrow</div></td>
|
||||
<td><div class="table_content">Left arrow</div></td>
|
||||
<td><div class="table_content">Right arrow</div></td>
|
||||
<td><div class="table_content">=<br />[<br />Page up</div></td>
|
||||
<td><div class="table_content">-<br />]<br />Page down</div></td>
|
||||
<td><div class="table_content">None</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="table_description">Description:</div></td>
|
||||
<td><div class="table_content">Move up</div></td>
|
||||
<td><div class="table_content">Move down</div></td>
|
||||
<td><div class="table_content">Move left</div></td>
|
||||
<td><div class="table_content">Move right</div></td>
|
||||
<td><div class="table_content">Zoom in</div></td>
|
||||
<td><div class="table_content">Zoom out</div></td>
|
||||
<td><div class="table_content">Zoom extent</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above.
|
||||
Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. <u>To correctly display the navigation icons, the <b>vis.css</b> file must be included.</u>
|
||||
The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
|
||||
|
||||
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<form onsubmit="draw(); return false;">
|
||||
<label for="nodeCount">Number of nodes:</label>
|
||||
<input id="nodeCount" type="text" value="25" style="width: 50px;">
|
||||
<input type="submit" value="Go">
|
||||
</form>
|
||||
<br>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<p id="selection"></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,221 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Data Manipulation</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
position:relative;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
table.legend_table {
|
||||
font-size: 11px;
|
||||
border-width:1px;
|
||||
border-color:#d3d3d3;
|
||||
border-style:solid;
|
||||
}
|
||||
table.legend_table,td {
|
||||
border-width:1px;
|
||||
border-color:#d3d3d3;
|
||||
border-style:solid;
|
||||
padding: 2px;
|
||||
}
|
||||
div.table_content {
|
||||
width:80px;
|
||||
text-align:center;
|
||||
}
|
||||
div.table_description {
|
||||
width:100px;
|
||||
}
|
||||
|
||||
#operation {
|
||||
font-size:28px;
|
||||
}
|
||||
#network-popUp {
|
||||
display:none;
|
||||
position:absolute;
|
||||
top:350px;
|
||||
left:170px;
|
||||
z-index:299;
|
||||
width:250px;
|
||||
height:120px;
|
||||
background-color: #f9f9f9;
|
||||
border-style:solid;
|
||||
border-width:3px;
|
||||
border-color: #5394ed;
|
||||
padding:10px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../dist/vis.css">
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function draw() {
|
||||
nodes = [];
|
||||
edges = [];
|
||||
var connectionCount = [];
|
||||
|
||||
// randomly create some nodes and edges
|
||||
var nodeCount = 25;
|
||||
for (var i = 0; i < nodeCount; i++) {
|
||||
nodes.push({
|
||||
id: i,
|
||||
label: String(i)
|
||||
});
|
||||
|
||||
connectionCount[i] = 0;
|
||||
|
||||
// create edges in a scale-free-network way
|
||||
if (i == 1) {
|
||||
var from = i;
|
||||
var to = 0;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
else if (i > 1) {
|
||||
var conn = edges.length * 2;
|
||||
var rand = Math.floor(Math.random() * conn);
|
||||
var cum = 0;
|
||||
var j = 0;
|
||||
while (j < connectionCount.length && cum < rand) {
|
||||
cum += connectionCount[j];
|
||||
j++;
|
||||
}
|
||||
|
||||
var from = i;
|
||||
var to = j;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
}
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
stabilize: false,
|
||||
dataManipulation: true,
|
||||
onAdd: function(data,callback) {
|
||||
var span = document.getElementById('operation');
|
||||
var idInput = document.getElementById('node-id');
|
||||
var labelInput = document.getElementById('node-label');
|
||||
var saveButton = document.getElementById('saveButton');
|
||||
var cancelButton = document.getElementById('cancelButton');
|
||||
var div = document.getElementById('network-popUp');
|
||||
span.innerHTML = "Add Node";
|
||||
idInput.value = data.id;
|
||||
labelInput.value = data.label;
|
||||
saveButton.onclick = saveData.bind(this,data,callback);
|
||||
cancelButton.onclick = clearPopUp.bind();
|
||||
div.style.display = 'block';
|
||||
},
|
||||
onEdit: function(data,callback) {
|
||||
var span = document.getElementById('operation');
|
||||
var idInput = document.getElementById('node-id');
|
||||
var labelInput = document.getElementById('node-label');
|
||||
var saveButton = document.getElementById('saveButton');
|
||||
var cancelButton = document.getElementById('cancelButton');
|
||||
var div = document.getElementById('network-popUp');
|
||||
span.innerHTML = "Edit Node";
|
||||
idInput.value = data.id;
|
||||
labelInput.value = data.label;
|
||||
saveButton.onclick = saveData.bind(this,data,callback);
|
||||
cancelButton.onclick = clearPopUp.bind();
|
||||
div.style.display = 'block';
|
||||
},
|
||||
onConnect: function(data,callback) {
|
||||
if (data.from == data.to) {
|
||||
var r=confirm("Do you want to connect the node to itself?");
|
||||
if (r==true) {
|
||||
callback(data);
|
||||
}
|
||||
}
|
||||
else {
|
||||
callback(data);
|
||||
}
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
// add event listeners
|
||||
network.on('select', function(params) {
|
||||
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
|
||||
});
|
||||
|
||||
network.on("resize", function(params) {console.log(params.width,params.height)});
|
||||
|
||||
function clearPopUp() {
|
||||
var saveButton = document.getElementById('saveButton');
|
||||
var cancelButton = document.getElementById('cancelButton');
|
||||
saveButton.onclick = null;
|
||||
cancelButton.onclick = null;
|
||||
var div = document.getElementById('network-popUp');
|
||||
div.style.display = 'none';
|
||||
|
||||
}
|
||||
|
||||
function saveData(data,callback) {
|
||||
var idInput = document.getElementById('node-id');
|
||||
var labelInput = document.getElementById('node-label');
|
||||
var div = document.getElementById('network-popUp');
|
||||
data.id = idInput.value;
|
||||
data.label = labelInput.value;
|
||||
clearPopUp();
|
||||
callback(data);
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<h2>Editing the dataset</h2>
|
||||
<div style="width: 700px; font-size:14px; text-align: justify;">
|
||||
In this example we have enabled the data manipulation setting. If the dataManipulation option is set to true, the edit button will appear.
|
||||
If you prefer to have the toolbar visible initially, you can set the initiallyVisible option to true. The exact method is described in the docs.
|
||||
<br /><br />
|
||||
The data manipulation allows the user to add nodes, connect them, edit them and delete any selected items. In this example we have created trigger functions
|
||||
for the add and edit operations. By settings these trigger functions the user can direct the way the data is manipulated. In this example we have created a simple
|
||||
pop-up that allows us to edit some of the properties.
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div id="network-popUp">
|
||||
<span id="operation">node</span> <br>
|
||||
<table style="margin:auto;"><tr>
|
||||
<td>id</td><td><input id="node-id" value="new value"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>label</td><td><input id="node-label" value="new value"> </td>
|
||||
</tr></table>
|
||||
<input type="button" value="save" id="saveButton"></button>
|
||||
<input type="button" value="cancel" id="cancelButton"></button>
|
||||
</div>
|
||||
<br />
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<p id="selection"></p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,374 +0,0 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Multiline text</title>
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 900px;
|
||||
height: 900px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
function draw() {
|
||||
// create some nodes
|
||||
var nodes = [
|
||||
{id:0,"labelHidden":"Myriel","group":1},
|
||||
{id:1,"labelHidden":"Napoleon","group":1},
|
||||
{id:2,"labelHidden":"Mlle.Baptistine","group":1},
|
||||
{id:3,"labelHidden":"Mme.Magloire","group":1},
|
||||
{id:4,"labelHidden":"CountessdeLo","group":1},
|
||||
{id:5,"labelHidden":"Geborand","group":1},
|
||||
{id:6,"labelHidden":"Champtercier","group":1},
|
||||
{id:7,"labelHidden":"Cravatte","group":1},
|
||||
{id:8,"labelHidden":"Count","group":1},
|
||||
{id:9,"labelHidden":"OldMan","group":1},
|
||||
{id:10,"labelHidden":"Labarre","group":2},
|
||||
{id:11,"labelHidden":"Valjean","group":2},
|
||||
{id:12,"labelHidden":"Marguerite","group":3},
|
||||
{id:13,"labelHidden":"Mme.deR","group":2},
|
||||
{id:14,"labelHidden":"Isabeau","group":2},
|
||||
{id:15,"labelHidden":"Gervais","group":2},
|
||||
{id:16,"labelHidden":"Tholomyes","group":3},
|
||||
{id:17,"labelHidden":"Listolier","group":3},
|
||||
{id:18,"labelHidden":"Fameuil","group":3},
|
||||
{id:19,"labelHidden":"Blacheville","group":3},
|
||||
{id:20,"labelHidden":"Favourite","group":3},
|
||||
{id:21,"labelHidden":"Dahlia","group":3},
|
||||
{id:22,"labelHidden":"Zephine","group":3},
|
||||
{id:23,"labelHidden":"Fantine","group":3},
|
||||
{id:24,"labelHidden":"Mme.Thenardier","group":4},
|
||||
{id:25,"labelHidden":"Thenardier","group":4},
|
||||
{id:26,"labelHidden":"Cosette","group":5},
|
||||
{id:27,"labelHidden":"Javert","group":4},
|
||||
{id:28,"labelHidden":"Fauchelevent","group":0},
|
||||
{id:29,"labelHidden":"Bamatabois","group":2},
|
||||
{id:30,"labelHidden":"Perpetue","group":3},
|
||||
{id:31,"labelHidden":"Simplice","group":2},
|
||||
{id:32,"labelHidden":"Scaufflaire","group":2},
|
||||
{id:33,"labelHidden":"Woman1","group":2},
|
||||
{id:34,"labelHidden":"Judge","group":2},
|
||||
{id:35,"labelHidden":"Champmathieu","group":2},
|
||||
{id:36,"labelHidden":"Brevet","group":2},
|
||||
{id:37,"labelHidden":"Chenildieu","group":2},
|
||||
{id:38,"labelHidden":"Cochepaille","group":2},
|
||||
{id:39,"labelHidden":"Pontmercy","group":4},
|
||||
{id:40,"labelHidden":"Boulatruelle","group":6},
|
||||
{id:41,"labelHidden":"Eponine","group":4},
|
||||
{id:42,"labelHidden":"Anzelma","group":4},
|
||||
{id:43,"labelHidden":"Woman2","group":5},
|
||||
{id:44,"labelHidden":"MotherInnocent","group":0},
|
||||
{id:45,"labelHidden":"Gribier","group":0},
|
||||
{id:46,"labelHidden":"Jondrette","group":7},
|
||||
{id:47,"labelHidden":"Mme.Burgon","group":7},
|
||||
{id:48,"labelHidden":"Gavroche","group":8},
|
||||
{id:49,"labelHidden":"Gillenormand","group":5},
|
||||
{id:50,"labelHidden":"Magnon","group":5},
|
||||
{id:51,"labelHidden":"Mlle.Gillenormand","group":5},
|
||||
{id:52,"labelHidden":"Mme.Pontmercy","group":5},
|
||||
{id:53,"labelHidden":"Mlle.Vaubois","group":5},
|
||||
{id:54,"labelHidden":"Lt.Gillenormand","group":5},
|
||||
{id:55,"labelHidden":"Marius","group":8},
|
||||
{id:56,"labelHidden":"BaronessT","group":5},
|
||||
{id:57,"labelHidden":"Mabeuf","group":8},
|
||||
{id:58,"labelHidden":"Enjolras","group":8},
|
||||
{id:59,"labelHidden":"Combeferre","group":8},
|
||||
{id:60,"labelHidden":"Prouvaire","group":8},
|
||||
{id:61,"labelHidden":"Feuilly","group":8},
|
||||
{id:62,"labelHidden":"Courfeyrac","group":8},
|
||||
{id:63,"labelHidden":"Bahorel","group":8},
|
||||
{id:64,"labelHidden":"Bossuet","group":8},
|
||||
{id:65,"labelHidden":"Joly","group":8},
|
||||
{id:66,"labelHidden":"Grantaire","group":8},
|
||||
{id:67,"labelHidden":"MotherPlutarch","group":9},
|
||||
{id:68,"labelHidden":"Gueulemer","group":4},
|
||||
{id:69,"labelHidden":"Babet","group":4},
|
||||
{id:70,"labelHidden":"Claquesous","group":4},
|
||||
{id:71,"labelHidden":"Montparnasse","group":4},
|
||||
{id:72,"labelHidden":"Toussaint","group":5},
|
||||
{id:73,"labelHidden":"Child1","group":10},
|
||||
{id:74,"labelHidden":"Child2","group":10},
|
||||
{id:75,"labelHidden":"Brujon","group":4},
|
||||
{id:76,"labelHidden":"Mme.Hucheloup","group":8}
|
||||
];
|
||||
|
||||
// create some edges
|
||||
var edges = [
|
||||
{"from":1,"to":0},
|
||||
{"from":2,"to":0},
|
||||
{"from":3,"to":0},
|
||||
{"from":3,"to":2},
|
||||
{"from":4,"to":0},
|
||||
{"from":5,"to":0},
|
||||
{"from":6,"to":0},
|
||||
{"from":7,"to":0},
|
||||
{"from":8,"to":0},
|
||||
{"from":9,"to":0},
|
||||
{"from":11,"to":10},
|
||||
{"from":11,"to":3},
|
||||
{"from":11,"to":2},
|
||||
{"from":11,"to":0},
|
||||
{"from":12,"to":11},
|
||||
{"from":13,"to":11},
|
||||
{"from":14,"to":11},
|
||||
{"from":15,"to":11},
|
||||
{"from":17,"to":16},
|
||||
{"from":18,"to":16},
|
||||
{"from":18,"to":17},
|
||||
{"from":19,"to":16},
|
||||
{"from":19,"to":17},
|
||||
{"from":19,"to":18},
|
||||
{"from":20,"to":16},
|
||||
{"from":20,"to":17},
|
||||
{"from":20,"to":18},
|
||||
{"from":20,"to":19},
|
||||
{"from":21,"to":16},
|
||||
{"from":21,"to":17},
|
||||
{"from":21,"to":18},
|
||||
{"from":21,"to":19},
|
||||
{"from":21,"to":20},
|
||||
{"from":22,"to":16},
|
||||
{"from":22,"to":17},
|
||||
{"from":22,"to":18},
|
||||
{"from":22,"to":19},
|
||||
{"from":22,"to":20},
|
||||
{"from":22,"to":21},
|
||||
{"from":23,"to":16},
|
||||
{"from":23,"to":17},
|
||||
{"from":23,"to":18},
|
||||
{"from":23,"to":19},
|
||||
{"from":23,"to":20},
|
||||
{"from":23,"to":21},
|
||||
{"from":23,"to":22},
|
||||
{"from":23,"to":12},
|
||||
{"from":23,"to":11},
|
||||
{"from":24,"to":23},
|
||||
{"from":24,"to":11},
|
||||
{"from":25,"to":24},
|
||||
{"from":25,"to":23},
|
||||
{"from":25,"to":11},
|
||||
{"from":26,"to":24},
|
||||
{"from":26,"to":11},
|
||||
{"from":26,"to":16},
|
||||
{"from":26,"to":25},
|
||||
{"from":27,"to":11},
|
||||
{"from":27,"to":23},
|
||||
{"from":27,"to":25},
|
||||
{"from":27,"to":24},
|
||||
{"from":27,"to":26},
|
||||
{"from":28,"to":11},
|
||||
{"from":28,"to":27},
|
||||
{"from":29,"to":23},
|
||||
{"from":29,"to":27},
|
||||
{"from":29,"to":11},
|
||||
{"from":30,"to":23},
|
||||
{"from":31,"to":30},
|
||||
{"from":31,"to":11},
|
||||
{"from":31,"to":23},
|
||||
{"from":31,"to":27},
|
||||
{"from":32,"to":11},
|
||||
{"from":33,"to":11},
|
||||
{"from":33,"to":27},
|
||||
{"from":34,"to":11},
|
||||
{"from":34,"to":29},
|
||||
{"from":35,"to":11},
|
||||
{"from":35,"to":34},
|
||||
{"from":35,"to":29},
|
||||
{"from":36,"to":34},
|
||||
{"from":36,"to":35},
|
||||
{"from":36,"to":11},
|
||||
{"from":36,"to":29},
|
||||
{"from":37,"to":34},
|
||||
{"from":37,"to":35},
|
||||
{"from":37,"to":36},
|
||||
{"from":37,"to":11},
|
||||
{"from":37,"to":29},
|
||||
{"from":38,"to":34},
|
||||
{"from":38,"to":35},
|
||||
{"from":38,"to":36},
|
||||
{"from":38,"to":37},
|
||||
{"from":38,"to":11},
|
||||
{"from":38,"to":29},
|
||||
{"from":39,"to":25},
|
||||
{"from":40,"to":25},
|
||||
{"from":41,"to":24},
|
||||
{"from":41,"to":25},
|
||||
{"from":42,"to":41},
|
||||
{"from":42,"to":25},
|
||||
{"from":42,"to":24},
|
||||
{"from":43,"to":11},
|
||||
{"from":43,"to":26},
|
||||
{"from":43,"to":27},
|
||||
{"from":44,"to":28},
|
||||
{"from":44,"to":11},
|
||||
{"from":45,"to":28},
|
||||
{"from":47,"to":46},
|
||||
{"from":48,"to":47},
|
||||
{"from":48,"to":25},
|
||||
{"from":48,"to":27},
|
||||
{"from":48,"to":11},
|
||||
{"from":49,"to":26},
|
||||
{"from":49,"to":11},
|
||||
{"from":50,"to":49},
|
||||
{"from":50,"to":24},
|
||||
{"from":51,"to":49},
|
||||
{"from":51,"to":26},
|
||||
{"from":51,"to":11},
|
||||
{"from":52,"to":51},
|
||||
{"from":52,"to":39},
|
||||
{"from":53,"to":51},
|
||||
{"from":54,"to":51},
|
||||
{"from":54,"to":49},
|
||||
{"from":54,"to":26},
|
||||
{"from":55,"to":51},
|
||||
{"from":55,"to":49},
|
||||
{"from":55,"to":39},
|
||||
{"from":55,"to":54},
|
||||
{"from":55,"to":26},
|
||||
{"from":55,"to":11},
|
||||
{"from":55,"to":16},
|
||||
{"from":55,"to":25},
|
||||
{"from":55,"to":41},
|
||||
{"from":55,"to":48},
|
||||
{"from":56,"to":49},
|
||||
{"from":56,"to":55},
|
||||
{"from":57,"to":55},
|
||||
{"from":57,"to":41},
|
||||
{"from":57,"to":48},
|
||||
{"from":58,"to":55},
|
||||
{"from":58,"to":48},
|
||||
{"from":58,"to":27},
|
||||
{"from":58,"to":57},
|
||||
{"from":58,"to":11},
|
||||
{"from":59,"to":58},
|
||||
{"from":59,"to":55},
|
||||
{"from":59,"to":48},
|
||||
{"from":59,"to":57},
|
||||
{"from":60,"to":48},
|
||||
{"from":60,"to":58},
|
||||
{"from":60,"to":59},
|
||||
{"from":61,"to":48},
|
||||
{"from":61,"to":58},
|
||||
{"from":61,"to":60},
|
||||
{"from":61,"to":59},
|
||||
{"from":61,"to":57},
|
||||
{"from":61,"to":55},
|
||||
{"from":62,"to":55},
|
||||
{"from":62,"to":58},
|
||||
{"from":62,"to":59},
|
||||
{"from":62,"to":48},
|
||||
{"from":62,"to":57},
|
||||
{"from":62,"to":41},
|
||||
{"from":62,"to":61},
|
||||
{"from":62,"to":60},
|
||||
{"from":63,"to":59},
|
||||
{"from":63,"to":48},
|
||||
{"from":63,"to":62},
|
||||
{"from":63,"to":57},
|
||||
{"from":63,"to":58},
|
||||
{"from":63,"to":61},
|
||||
{"from":63,"to":60},
|
||||
{"from":63,"to":55},
|
||||
{"from":64,"to":55},
|
||||
{"from":64,"to":62},
|
||||
{"from":64,"to":48},
|
||||
{"from":64,"to":63},
|
||||
{"from":64,"to":58},
|
||||
{"from":64,"to":61},
|
||||
{"from":64,"to":60},
|
||||
{"from":64,"to":59},
|
||||
{"from":64,"to":57},
|
||||
{"from":64,"to":11},
|
||||
{"from":65,"to":63},
|
||||
{"from":65,"to":64},
|
||||
{"from":65,"to":48},
|
||||
{"from":65,"to":62},
|
||||
{"from":65,"to":58},
|
||||
{"from":65,"to":61},
|
||||
{"from":65,"to":60},
|
||||
{"from":65,"to":59},
|
||||
{"from":65,"to":57},
|
||||
{"from":65,"to":55},
|
||||
{"from":66,"to":64},
|
||||
{"from":66,"to":58},
|
||||
{"from":66,"to":59},
|
||||
{"from":66,"to":62},
|
||||
{"from":66,"to":65},
|
||||
{"from":66,"to":48},
|
||||
{"from":66,"to":63},
|
||||
{"from":66,"to":61},
|
||||
{"from":66,"to":60},
|
||||
{"from":67,"to":57},
|
||||
{"from":68,"to":25},
|
||||
{"from":68,"to":11},
|
||||
{"from":68,"to":24},
|
||||
{"from":68,"to":27},
|
||||
{"from":68,"to":48},
|
||||
{"from":68,"to":41},
|
||||
{"from":69,"to":25},
|
||||
{"from":69,"to":68},
|
||||
{"from":69,"to":11},
|
||||
{"from":69,"to":24},
|
||||
{"from":69,"to":27},
|
||||
{"from":69,"to":48},
|
||||
{"from":69,"to":41},
|
||||
{"from":70,"to":25},
|
||||
{"from":70,"to":69},
|
||||
{"from":70,"to":68},
|
||||
{"from":70,"to":11},
|
||||
{"from":70,"to":24},
|
||||
{"from":70,"to":27},
|
||||
{"from":70,"to":41},
|
||||
{"from":70,"to":58},
|
||||
{"from":71,"to":27},
|
||||
{"from":71,"to":69},
|
||||
{"from":71,"to":68},
|
||||
{"from":71,"to":70},
|
||||
{"from":71,"to":11},
|
||||
{"from":71,"to":48},
|
||||
{"from":71,"to":41},
|
||||
{"from":71,"to":25},
|
||||
{"from":72,"to":26},
|
||||
{"from":72,"to":27},
|
||||
{"from":72,"to":11},
|
||||
{"from":73,"to":48},
|
||||
{"from":74,"to":48},
|
||||
{"from":74,"to":73},
|
||||
{"from":75,"to":69},
|
||||
{"from":75,"to":68},
|
||||
{"from":75,"to":25},
|
||||
{"from":75,"to":48},
|
||||
{"from":75,"to":41},
|
||||
{"from":75,"to":70},
|
||||
{"from":75,"to":71},
|
||||
{"from":76,"to":64},
|
||||
{"from":76,"to":65},
|
||||
{"from":76,"to":66},
|
||||
{"from":76,"to":63},
|
||||
{"from":76,"to":62},
|
||||
{"from":76,"to":48},
|
||||
{"from":76,"to":58}
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {nodes: {shape:'circle'},stabilize: false};
|
||||
var network = new vis.Network(container, data, options);
|
||||
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
<div id="mynetwork"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,153 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Random nodes</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function destroy() {
|
||||
if (network !== null) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
destroy();
|
||||
nodes = [];
|
||||
edges = [];
|
||||
var connectionCount = [];
|
||||
|
||||
// randomly create some nodes and edges
|
||||
var nodeCount = document.getElementById('nodeCount').value;
|
||||
for (var i = 0; i < nodeCount; i++) {
|
||||
nodes.push({
|
||||
id: i,
|
||||
label: String(i)
|
||||
});
|
||||
|
||||
connectionCount[i] = 0;
|
||||
|
||||
// create edges in a scale-free-network way
|
||||
if (i == 1) {
|
||||
var from = i;
|
||||
var to = 0;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
else if (i > 1) {
|
||||
var conn = edges.length * 2;
|
||||
var rand = Math.floor(Math.random() * conn);
|
||||
var cum = 0;
|
||||
var j = 0;
|
||||
while (j < connectionCount.length && cum < rand) {
|
||||
cum += connectionCount[j];
|
||||
j++;
|
||||
}
|
||||
|
||||
|
||||
var from = i;
|
||||
var to = j;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
}
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var directionInput = document.getElementById("direction");
|
||||
var options = {
|
||||
stabilize: false,
|
||||
smoothCurves: false,
|
||||
hierarchicalLayout: {
|
||||
direction: directionInput.value
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
// add event listeners
|
||||
network.on('select', function(params) {
|
||||
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<h2>Hierarchical Layout - Scale-Free-Network</h2>
|
||||
<div style="width:700px; font-size:14px; text-align: justify;">
|
||||
This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
|
||||
In this example, hierarchical layout has been enabled and the vertical levels are determined automatically.
|
||||
</div>
|
||||
<br />
|
||||
<form onsubmit="draw(); return false;">
|
||||
<label for="nodeCount">Number of nodes:</label>
|
||||
<input id="nodeCount" type="text" value="25" style="width: 50px;">
|
||||
<input type="submit" value="Go">
|
||||
</form>
|
||||
<input type="button" id="btn-UD" value="Up-Down">
|
||||
<input type="button" id="btn-DU" value="Down-Up">
|
||||
<input type="button" id="btn-LR" value="Left-Right">
|
||||
<input type="button" id="btn-RL" value="Right-Left">
|
||||
<input type="hidden" id='direction' value="UD">
|
||||
|
||||
<script language="javascript">
|
||||
var directionInput = document.getElementById("direction");
|
||||
var btnUD = document.getElementById("btn-UD");
|
||||
btnUD.onclick = function() {
|
||||
directionInput.value = "UD";
|
||||
draw();
|
||||
}
|
||||
var btnDU = document.getElementById("btn-DU");
|
||||
btnDU.onclick = function() {
|
||||
directionInput.value = "DU";
|
||||
draw();
|
||||
};
|
||||
var btnLR = document.getElementById("btn-LR");
|
||||
btnLR.onclick = function() {
|
||||
directionInput.value = "LR";
|
||||
draw();
|
||||
};
|
||||
var btnRL = document.getElementById("btn-RL");
|
||||
btnRL.onclick = function() {
|
||||
directionInput.value = "RL";
|
||||
draw();
|
||||
};
|
||||
</script>
|
||||
<br>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<p id="selection"></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,109 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Playing with Physics</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function draw() {
|
||||
nodes = [];
|
||||
edges = [];
|
||||
var connectionCount = [];
|
||||
|
||||
// randomly create some nodes and edges
|
||||
var nodeCount = 60;
|
||||
for (var i = 0; i < nodeCount; i++) {
|
||||
nodes.push({
|
||||
id: i,
|
||||
label: String(i)
|
||||
});
|
||||
|
||||
connectionCount[i] = 0;
|
||||
|
||||
// create edges in a scale-free-network way
|
||||
if (i == 1) {
|
||||
var from = i;
|
||||
var to = 0;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
else if (i > 1) {
|
||||
var conn = edges.length * 2;
|
||||
var rand = Math.floor(Math.random() * conn);
|
||||
var cum = 0;
|
||||
var j = 0;
|
||||
while (j < connectionCount.length && cum < rand) {
|
||||
cum += connectionCount[j];
|
||||
j++;
|
||||
}
|
||||
|
||||
|
||||
var from = i;
|
||||
var to = j;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
}
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
|
||||
var options = {
|
||||
stabilize: false,
|
||||
configurePhysics:true
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
// add event listeners
|
||||
network.on('select', function(params) {
|
||||
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
|
||||
<h2>Playing with Physics</h2>
|
||||
<div style="width: 700px; font-size:14px; text-align: justify;">
|
||||
Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, network has a special option
|
||||
that the user can use to explore which settings may be good for him or her. This is ment to be used during the development phase when you are implementing vis.js. Once you have found
|
||||
settings you are happy with, you can supply them to network using the documented physics options.
|
||||
|
||||
On start, the default settings will be loaded. Keep in mind that selecting the hierarchical simulation mode <b>disables</b> smooth curves. These will not be enabled again afterwards.
|
||||
</div>
|
||||
<br />
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<p id="selection"></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,89 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Static smooth curves</title>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h2>Static smooth curves</h2>
|
||||
<div style="width:700px; font-size:14px; text-align: justify;">
|
||||
All the smooth curves in the examples so far have been using dynamic smooth curves. This means that each curve has a
|
||||
support node which takes part in the physics simulation. For large networks or dense clusters, this may not be the ideal
|
||||
solution. To solve this, static smooth curves have been added. The static smooth curves are based only on the positions of the connected
|
||||
nodes. There are multiple ways to determine the way this curve is drawn. This example shows the effect of the different
|
||||
types. <br /> <br />
|
||||
Drag the nodes around each other to see how the smooth curves are drawn for each setting. For animated system, we
|
||||
recommend only the continuous mode. In the next example you can see the effect of these methods on a large network. Keep in mind
|
||||
that the direction (the from and to) of the curve matters.
|
||||
<br /> <br />
|
||||
</div>
|
||||
|
||||
Smooth curve type:
|
||||
<select id="dropdownID">
|
||||
<option value="continuous" selected="selected">continuous</option>
|
||||
<option value="discrete">discrete</option>
|
||||
<option value="diagonalCross">diagonalCross</option>
|
||||
<option value="straightCross">straightCross</option>
|
||||
<option value="horizontal">horizontal</option>
|
||||
<option value="vertical">vertical</option>
|
||||
<option value="curvedCW">curvedCW</option>
|
||||
<option value="curvedCCW">curvedCCW</option>
|
||||
</select><br/>
|
||||
Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05" style="width:200px" id="roundnessSlider"> <input id="roundnessScreen" value="0.5"> (0.5 is max roundness for continuous, 1.0 for the others)
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var dropdown = document.getElementById("dropdownID");
|
||||
dropdown.onchange = update;
|
||||
var roundnessSlider = document.getElementById("roundnessSlider");
|
||||
roundnessSlider.onchange = update;
|
||||
|
||||
var roundnessScreen = document.getElementById("roundnessScreen");
|
||||
// create an array with nodes
|
||||
var nodes = [
|
||||
{id: 1, label: 'Node 1'},
|
||||
{id: 2, label: 'Node 2', x:150, y:130, allowedToMoveX: true, allowedToMoveY: true}
|
||||
];
|
||||
|
||||
// create an array with edges
|
||||
var edges = [
|
||||
{from: 1, to: 2, style:"arrow"}
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {physics:{barnesHut:{gravitationalConstant:0, springConstant:0, centralGravity: 0}},
|
||||
smoothCurves:{dynamic:false, type: '1'}};
|
||||
var network = new vis.Network(container, data, options);
|
||||
|
||||
function update() {
|
||||
var type = dropdown.value;
|
||||
var roundness = roundnessSlider.value;
|
||||
roundnessScreen.value = roundness;
|
||||
var options = {smoothCurves:{type:type, roundness:roundness}}
|
||||
|
||||
network.setOptions(options);
|
||||
}
|
||||
|
||||
update();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,166 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
|
||||
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF8">
|
||||
<title>Dynamic Data - Importing from Gephi (JSON)</title>
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../dist/vis.css">
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
|
||||
div.nodeContent {
|
||||
position: relative;
|
||||
border: 1px solid lightgray;
|
||||
width:480px;
|
||||
height:780px;
|
||||
margin-top: -802px;
|
||||
margin-left: 810px;
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
pre {padding: 5px; margin: 5px; }
|
||||
.string { color: green; }
|
||||
.number { color: darkorange; }
|
||||
.boolean { color: blue; }
|
||||
.null { color: magenta; }
|
||||
.key { color: red; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h2>Dynamic Data - Importing from Gephi (JSON)</h2>
|
||||
<div style="width:700px; font-size:14px; text-align: justify;">
|
||||
This example shows how to import a JSON file exported by Gephi. The two options available for the import are
|
||||
available through the checkboxes. You can download the Gephi JSON exporter here:
|
||||
<a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
|
||||
All of Gephi's attributes are also contained within the node elements. This means you can access all of this data through the DataSet.
|
||||
<br />
|
||||
</div>
|
||||
|
||||
|
||||
<input type="checkbox" id="allowedToMove">: Allow to move after import. <br/>
|
||||
<input type="checkbox" id="parseColor">: Parse the color instead of copy (adds borders, highlights etc.)
|
||||
<div id="mynetwork"></div>
|
||||
<div class="nodeContent"><h4>Node Content:</h4> <pre id="nodeContent"></pre></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var network;
|
||||
|
||||
var nodes = new vis.DataSet();
|
||||
var edges = new vis.DataSet();
|
||||
var gephiImported;
|
||||
var allowedToMoveCheckbox = document.getElementById("allowedToMove");
|
||||
allowedToMoveCheckbox.onchange = redrawAll;
|
||||
|
||||
var parseColorCheckbox = document.getElementById("parseColor");
|
||||
parseColorCheckbox.onchange = redrawAll;
|
||||
|
||||
var nodeContent = document.getElementById("nodeContent");
|
||||
|
||||
loadJSON("./data/WorldCup2014.json",redrawAll);
|
||||
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
fontFace: "Tahoma"
|
||||
},
|
||||
edges: {
|
||||
width: 0.15,
|
||||
inheritColor: "from"
|
||||
},
|
||||
tooltip: {
|
||||
delay: 200,
|
||||
fontSize: 12,
|
||||
color: {
|
||||
background: "#fff"
|
||||
}
|
||||
},
|
||||
smoothCurves: {dynamic:false, type: "continuous"},
|
||||
stabilize: false,
|
||||
physics: {barnesHut: {gravitationalConstant: -10000, springConstant: 0.002, springLength: 150}},
|
||||
hideEdgesOnDrag: true
|
||||
};
|
||||
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
/**
|
||||
* This function fills the DataSets. These DataSets will update the network.
|
||||
*/
|
||||
function redrawAll(gephiJSON) {
|
||||
if (gephiJSON.nodes === undefined) {
|
||||
gephiJSON = gephiImported;
|
||||
}
|
||||
else {
|
||||
gephiImported = gephiJSON;
|
||||
}
|
||||
|
||||
nodes.clear();
|
||||
edges.clear();
|
||||
|
||||
var allowedToMove = allowedToMoveCheckbox.checked;
|
||||
var parseColor = parseColorCheckbox.checked;
|
||||
var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {allowedToMove:allowedToMove, parseColor:parseColor});
|
||||
|
||||
// add the parsed data to the DataSets.
|
||||
nodes.add(parsed.nodes);
|
||||
edges.add(parsed.edges);
|
||||
|
||||
var data = nodes.get(2); // get the data from node 2
|
||||
nodeContent.innerHTML = syntaxHighlight(data); // show the data in the div
|
||||
network.zoomExtent(); // zoom to fit
|
||||
}
|
||||
|
||||
// from http://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript
|
||||
function syntaxHighlight(json) {
|
||||
if (typeof json != 'string') {
|
||||
json = JSON.stringify(json, undefined, 2);
|
||||
}
|
||||
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
|
||||
var cls = 'number';
|
||||
if (/^"/.test(match)) {
|
||||
if (/:$/.test(match)) {
|
||||
cls = 'key';
|
||||
} else {
|
||||
cls = 'string';
|
||||
}
|
||||
} else if (/true|false/.test(match)) {
|
||||
cls = 'boolean';
|
||||
} else if (/null/.test(match)) {
|
||||
cls = 'null';
|
||||
}
|
||||
return '<span class="' + cls + '">' + match + '</span>';
|
||||
});
|
||||
}
|
||||
|
||||
function loadJSON(path, success, error) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status === 200) {
|
||||
success(JSON.parse(xhr.responseText));
|
||||
}
|
||||
else {
|
||||
error(xhr);
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.open("GET", path, true);
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
@@ -1,239 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Localization</title>
|
||||
|
||||
<style type="text/css">
|
||||
body, select {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
position:relative;
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
table.legend_table {
|
||||
font-size: 11px;
|
||||
border-width:1px;
|
||||
border-color:#d3d3d3;
|
||||
border-style:solid;
|
||||
}
|
||||
table.legend_table,td {
|
||||
border-width:1px;
|
||||
border-color:#d3d3d3;
|
||||
border-style:solid;
|
||||
padding: 2px;
|
||||
}
|
||||
div.table_content {
|
||||
width:80px;
|
||||
text-align:center;
|
||||
}
|
||||
div.table_description {
|
||||
width:100px;
|
||||
}
|
||||
|
||||
#operation {
|
||||
font-size:28px;
|
||||
}
|
||||
#network-popUp {
|
||||
display:none;
|
||||
position:absolute;
|
||||
top:350px;
|
||||
left:170px;
|
||||
z-index:299;
|
||||
width:250px;
|
||||
height:120px;
|
||||
background-color: #f9f9f9;
|
||||
border-style:solid;
|
||||
border-width:3px;
|
||||
border-color: #5394ed;
|
||||
padding:10px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../dist/vis.css">
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function destroy() {
|
||||
if (network !== null) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
destroy();
|
||||
nodes = [];
|
||||
edges = [];
|
||||
var connectionCount = [];
|
||||
|
||||
// randomly create some nodes and edges
|
||||
var nodeCount = 25;
|
||||
for (var i = 0; i < nodeCount; i++) {
|
||||
nodes.push({
|
||||
id: i,
|
||||
label: String(i)
|
||||
});
|
||||
|
||||
connectionCount[i] = 0;
|
||||
|
||||
// create edges in a scale-free-network way
|
||||
if (i == 1) {
|
||||
var from = i;
|
||||
var to = 0;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
else if (i > 1) {
|
||||
var conn = edges.length * 2;
|
||||
var rand = Math.floor(Math.random() * conn);
|
||||
var cum = 0;
|
||||
var j = 0;
|
||||
while (j < connectionCount.length && cum < rand) {
|
||||
cum += connectionCount[j];
|
||||
j++;
|
||||
}
|
||||
|
||||
var from = i;
|
||||
var to = j;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
}
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
stabilize: false,
|
||||
dataManipulation: true,
|
||||
onAdd: function(data,callback) {
|
||||
var span = document.getElementById('operation');
|
||||
var idInput = document.getElementById('node-id');
|
||||
var labelInput = document.getElementById('node-label');
|
||||
var saveButton = document.getElementById('saveButton');
|
||||
var cancelButton = document.getElementById('cancelButton');
|
||||
var div = document.getElementById('network-popUp');
|
||||
span.innerHTML = "Add Node";
|
||||
idInput.value = data.id;
|
||||
labelInput.value = data.label;
|
||||
saveButton.onclick = saveData.bind(this,data,callback);
|
||||
cancelButton.onclick = clearPopUp.bind();
|
||||
div.style.display = 'block';
|
||||
},
|
||||
onEdit: function(data,callback) {
|
||||
var span = document.getElementById('operation');
|
||||
var idInput = document.getElementById('node-id');
|
||||
var labelInput = document.getElementById('node-label');
|
||||
var saveButton = document.getElementById('saveButton');
|
||||
var cancelButton = document.getElementById('cancelButton');
|
||||
var div = document.getElementById('network-popUp');
|
||||
span.innerHTML = "Edit Node";
|
||||
idInput.value = data.id;
|
||||
labelInput.value = data.label;
|
||||
saveButton.onclick = saveData.bind(this,data,callback);
|
||||
cancelButton.onclick = clearPopUp.bind();
|
||||
div.style.display = 'block';
|
||||
},
|
||||
onConnect: function(data,callback) {
|
||||
if (data.from == data.to) {
|
||||
var r=confirm("Do you want to connect the node to itself?");
|
||||
if (r==true) {
|
||||
callback(data);
|
||||
}
|
||||
}
|
||||
else {
|
||||
callback(data);
|
||||
}
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
// add event listeners
|
||||
network.on('select', function(params) {
|
||||
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
|
||||
});
|
||||
|
||||
network.on("resize", function(params) {console.log(params.width,params.height)});
|
||||
|
||||
function clearPopUp() {
|
||||
var saveButton = document.getElementById('saveButton');
|
||||
var cancelButton = document.getElementById('cancelButton');
|
||||
saveButton.onclick = null;
|
||||
cancelButton.onclick = null;
|
||||
var div = document.getElementById('network-popUp');
|
||||
div.style.display = 'none';
|
||||
}
|
||||
|
||||
function saveData(data,callback) {
|
||||
var idInput = document.getElementById('node-id');
|
||||
var labelInput = document.getElementById('node-label');
|
||||
var div = document.getElementById('network-popUp');
|
||||
data.id = idInput.value;
|
||||
data.label = labelInput.value;
|
||||
clearPopUp();
|
||||
callback(data);
|
||||
|
||||
}
|
||||
|
||||
// update the locale when changing the select box value
|
||||
var select = document.getElementById('locale');
|
||||
select.onchange = function () {
|
||||
network.setOptions({
|
||||
locale: this.value
|
||||
});
|
||||
};
|
||||
select.onchange();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<h2>Editing the dataset (localized)</h2>
|
||||
<p style="width: 700px; font-size:14px; text-align: justify;">
|
||||
This is the same example as <a href="21_data_manipulation.html">21_data_manipulation.html</a>, except that there is a select box added which allows to switch locale. The localization is only relevant to the manipulation buttons.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="locale">Select a locale:</label>
|
||||
<select id="locale">
|
||||
<option value="en" selected>en</option>
|
||||
<option value="nl">nl</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<div id="network-popUp">
|
||||
<span id="operation">node</span> <br>
|
||||
<table style="margin:auto;"><tr>
|
||||
<td>id</td><td><input id="node-id" value="new value"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>label</td><td><input id="node-label" value="new value"> </td>
|
||||
</tr></table>
|
||||
<input type="button" value="save" id="saveButton"></button>
|
||||
<input type="button" value="cancel" id="cancelButton"></button>
|
||||
</div>
|
||||
<br />
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<p id="selection"></p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,149 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Hierarchical layout difference</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 800px;
|
||||
height: 500px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var network = null;
|
||||
var layoutMethod = "hubsize";
|
||||
|
||||
function destroy() {
|
||||
if (network !== null) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
destroy();
|
||||
|
||||
var nodes = [];
|
||||
var edges = [];
|
||||
// randomly create some nodes and edges
|
||||
for (var i = 0; i < 15; i++) {
|
||||
nodes.push({
|
||||
id: i,
|
||||
label: String(i)
|
||||
});
|
||||
}
|
||||
edges.push({
|
||||
from: 0,
|
||||
to: 1
|
||||
});
|
||||
edges.push({
|
||||
from: 0,
|
||||
to: 6
|
||||
});
|
||||
edges.push({
|
||||
from: 0,
|
||||
to: 13
|
||||
});edges.push({
|
||||
from: 0,
|
||||
to: 11
|
||||
});
|
||||
edges.push({
|
||||
from: 1,
|
||||
to: 2
|
||||
});
|
||||
edges.push({
|
||||
from: 2,
|
||||
to: 3
|
||||
});
|
||||
edges.push({
|
||||
from: 2,
|
||||
to: 4
|
||||
});
|
||||
edges.push({
|
||||
from: 3,
|
||||
to: 5
|
||||
});
|
||||
edges.push({
|
||||
from: 1,
|
||||
to: 10
|
||||
});
|
||||
edges.push({
|
||||
from: 1,
|
||||
to: 7
|
||||
});
|
||||
edges.push({
|
||||
from: 2,
|
||||
to: 8
|
||||
});
|
||||
edges.push({
|
||||
from: 2,
|
||||
to: 9
|
||||
});
|
||||
edges.push({
|
||||
from: 3,
|
||||
to: 14
|
||||
});
|
||||
edges.push({
|
||||
from: 1,
|
||||
to: 12
|
||||
});
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
|
||||
var options = {
|
||||
hierarchicalLayout: {
|
||||
layout: layoutMethod
|
||||
},
|
||||
edges: {style:"arrow"},
|
||||
smoothCurves:false
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
// add event listeners
|
||||
network.on('select', function(params) {
|
||||
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<h2>Hierarchical layout difference</h2>
|
||||
<div style="width:700px; font-size:14px; text-align: justify;">
|
||||
This example shows a the effect of the different hierarchical layout methods. Hubsize is based on the amount of edges connected to a node.
|
||||
The node with the most connections (the largest hub) is drawn at the top of the tree. The direction method is based on the direction of the edges.
|
||||
Try switching between the methods with the dropdown box below.
|
||||
</div>
|
||||
Layout method:
|
||||
<select id="layout">
|
||||
<option value="hubsize">hubsize</option>
|
||||
<option value="direction">direction</option>
|
||||
</select><br/>
|
||||
<br />
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<p id="selection"></p>
|
||||
<script language="JavaScript">
|
||||
var dropdown = document.getElementById("layout");
|
||||
dropdown.onchange = function() {
|
||||
layoutMethod = dropdown.value;
|
||||
draw();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,326 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Animation</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
|
||||
div.left {
|
||||
position:relative;
|
||||
float:left;
|
||||
width:300px;
|
||||
border: 1px #c7c7c7 solid;
|
||||
height:590px;
|
||||
padding:5px;
|
||||
}
|
||||
|
||||
div.right {
|
||||
padding-left:10px;
|
||||
float:left;
|
||||
width:600px;
|
||||
}
|
||||
|
||||
div.bottom {
|
||||
position:absolute;
|
||||
bottom:5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
var doButton, focusButton, showButton;
|
||||
var statusUpdateSpan;
|
||||
var finishMessage = "";
|
||||
|
||||
function destroy() {
|
||||
if (network !== null) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
destroy();
|
||||
statusUpdateSpan = document.getElementById("statusUpdate");
|
||||
doButton = document.getElementById("btnDo");
|
||||
focusButton = document.getElementById("btnFocus");
|
||||
showButton = document.getElementById("btnShow");
|
||||
nodes = [];
|
||||
edges = [];
|
||||
var connectionCount = [];
|
||||
|
||||
// randomly create some nodes and edges
|
||||
var nodeCount = 25;
|
||||
for (var i = 0; i < nodeCount; i++) {
|
||||
nodes.push({
|
||||
id: i,
|
||||
label: String(i)
|
||||
});
|
||||
|
||||
connectionCount[i] = 0;
|
||||
|
||||
// create edges in a scale-free-network way
|
||||
if (i == 1) {
|
||||
var from = i;
|
||||
var to = 0;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
else if (i > 1) {
|
||||
var conn = edges.length * 2;
|
||||
var rand = Math.floor(Math.random() * conn);
|
||||
var cum = 0;
|
||||
var j = 0;
|
||||
while (j < connectionCount.length && cum < rand) {
|
||||
cum += connectionCount[j];
|
||||
j++;
|
||||
}
|
||||
|
||||
|
||||
var from = i;
|
||||
var to = j;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
}
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {stabilizationIterations:1200};
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
// add event listeners
|
||||
network.on('select', function(params) {
|
||||
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
|
||||
});
|
||||
network.on('stabilized', function (params) {
|
||||
document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
|
||||
});
|
||||
network.on("animationFinished", function() {
|
||||
statusUpdateSpan.innerHTML = finishMessage;
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function zoomExtentAnimated() {
|
||||
var offsetx = parseInt(document.getElementById("offsetx").value);
|
||||
var offsety = parseInt(document.getElementById("offsety").value);
|
||||
var duration = parseInt(document.getElementById("duration").value);
|
||||
var easingFunction = document.getElementById("easingFunction").value;
|
||||
|
||||
var options = {offset: {x:offsetx,y:offsety},
|
||||
duration: duration,
|
||||
easingFunction: easingFunction
|
||||
}
|
||||
statusUpdateSpan.innerHTML = "Doing ZoomExtent() Animation.";
|
||||
finishMessage = "Animation finished."
|
||||
network.zoomExtent(options);
|
||||
}
|
||||
|
||||
function doDefaultAnimation() {
|
||||
var offsetx = parseInt(document.getElementById("offsetx").value);
|
||||
var offsety = parseInt(document.getElementById("offsety").value);
|
||||
var scale = parseFloat(document.getElementById("scale").value);
|
||||
var positionx = parseInt(document.getElementById("positionx").value);
|
||||
var positiony = parseInt(document.getElementById("positiony").value);
|
||||
var easingFunction = document.getElementById("easingFunction").value;
|
||||
|
||||
var options = {
|
||||
position: {x:positionx,y:positiony},
|
||||
scale: scale,
|
||||
offset: {x:offsetx,y:offsety},
|
||||
animation: true // default duration is 1000ms and default easingFunction is easeInOutQuad.
|
||||
}
|
||||
statusUpdateSpan.innerHTML = "Doing Animation.";
|
||||
finishMessage = "Animation finished."
|
||||
network.moveTo(options);
|
||||
}
|
||||
|
||||
function doAnimation() {
|
||||
var offsetx = parseInt(document.getElementById("offsetx").value);
|
||||
var offsety = parseInt(document.getElementById("offsety").value);
|
||||
var duration = parseInt(document.getElementById("duration").value);
|
||||
var scale = parseFloat(document.getElementById("scale").value);
|
||||
var positionx = parseInt(document.getElementById("positionx").value);
|
||||
var positiony = parseInt(document.getElementById("positiony").value);
|
||||
var easingFunction = document.getElementById("easingFunction").value;
|
||||
|
||||
var options = {
|
||||
position: {x:positionx,y:positiony},
|
||||
scale: scale,
|
||||
offset: {x:offsetx,y:offsety},
|
||||
animation: {
|
||||
duration: duration,
|
||||
easingFunction: easingFunction
|
||||
}
|
||||
}
|
||||
statusUpdateSpan.innerHTML = "Doing Animation.";
|
||||
finishMessage = "Animation finished."
|
||||
network.moveTo(options);
|
||||
}
|
||||
|
||||
function focusRandom() {
|
||||
var nodeId = Math.floor(Math.random() * 25);
|
||||
var offsetx = parseInt(document.getElementById("offsetx").value);
|
||||
var offsety = parseInt(document.getElementById("offsety").value);
|
||||
var duration = parseInt(document.getElementById("duration").value);
|
||||
var scale = parseFloat(document.getElementById("scale").value);
|
||||
var easingFunction = document.getElementById("easingFunction").value;
|
||||
|
||||
var options = {
|
||||
// position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes
|
||||
scale: scale,
|
||||
offset: {x:offsetx,y:offsety},
|
||||
animation: {
|
||||
duration: duration,
|
||||
easingFunction: easingFunction
|
||||
}
|
||||
}
|
||||
statusUpdateSpan.innerHTML = "Focusing on node: " + nodeId;
|
||||
finishMessage = "Node: " + nodeId + " in focus.";
|
||||
network.focusOnNode(nodeId, options);
|
||||
}
|
||||
|
||||
|
||||
var showInterval = false;
|
||||
var showPhase = 1;
|
||||
function startShow() {
|
||||
if (showInterval !== false) {
|
||||
showInterval = false;
|
||||
showButton.value = "Start a show!";
|
||||
network.zoomExtent();
|
||||
}
|
||||
else {
|
||||
showButton.value = "Stop the show!";
|
||||
var duration = parseInt(document.getElementById("duration").value);
|
||||
focusRandom();
|
||||
window.setTimeout(doTheShow, duration);
|
||||
showInterval = true;
|
||||
}
|
||||
}
|
||||
|
||||
function doTheShow() {
|
||||
if (showInterval == true) {
|
||||
var duration = parseInt(document.getElementById("duration").value);
|
||||
if (showPhase == 0) {
|
||||
focusRandom();
|
||||
showPhase = 1;
|
||||
}
|
||||
else {
|
||||
zoomExtentAnimated();
|
||||
showPhase = 0;
|
||||
}
|
||||
window.setTimeout(doTheShow, duration);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<h2>Camera animations</h2>
|
||||
<div style="width:700px; font-size:14px;">
|
||||
You can move the view around programmatically using the .moveTo(options) function. The options supplied to this function can
|
||||
also be (partially) supplied to the .zoomExtent() and .focusOnNode() methods. These are explained in the docs.
|
||||
<br /><br/>
|
||||
The buttons below take the fields from the table when they can. For instance, the "Animate with default settings." takes the position, scale and offset while using
|
||||
the default animation values for duration and easing function. The focusOnNode takes everything except the position and the zoomExtent takes only the duration and easing function.
|
||||
<br/><br/>
|
||||
Here you can see a full description of the options you can supply to moveTo:
|
||||
</div>
|
||||
<pre>
|
||||
var moveToOptions = {
|
||||
position: {x:x, y:x}, // position to animate to (Numbers)
|
||||
scale: 1.0, // scale to animate to (Number)
|
||||
offset: {x:x, y:y}, // offset from the center in DOM pixels (Numbers)
|
||||
animation: { // animation object, can also be Boolean
|
||||
duration: 1000, // animation duration in milliseconds (Number)
|
||||
easingFunction: "easeInOutQuad" // Animation easing function, available are:
|
||||
} // linear, easeInQuad, easeOutQuad, easeInOutQuad,
|
||||
} // easeInCubic, easeOutCubic, easeInOutCubic,
|
||||
// easeInQuart, easeOutQuart, easeInOutQuart,
|
||||
// easeInQuint, easeOutQuint, easeInOutQuint
|
||||
</pre>
|
||||
<div class="left">
|
||||
<table>
|
||||
<tr>
|
||||
<td>position x</td><td><input type="text" value="300" id="positionx" style="width:170px;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>position y</td><td><input type="text" value="300" id="positiony" style="width:170px;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>scale</td><td><input type="text" value="1.0" id="scale" style="width:170px;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>offset x</td><td><input type="text" value="0" id="offsetx" style="width:170px;"> px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>offset y</td><td><input type="text" value="0" id="offsety" style="width:170px;"> px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>duration</td><td><input type="text" value="2500" id="duration" style="width:170px;"> ms</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>easingFunction</td><td>
|
||||
<select id="easingFunction" style="width:174px;">
|
||||
<option value="linear">linear</option>
|
||||
<option value="easeInQuad">easeInQuad</option>
|
||||
<option value="easeOutQuad">easeOutQuad</option>
|
||||
<option value="easeInOutQuad" selected="selected">easeInOutQuad</option>
|
||||
<option value="easeInCubic">easeInCubic</option>
|
||||
<option value="easeOutCubic">easeOutCubic</option>
|
||||
<option value="easeInOutCubic">easeInOutCubic</option>
|
||||
<option value="easeInQuart">easeInQuart</option>
|
||||
<option value="easeOutQuart">easeOutQuart</option>
|
||||
<option value="easeInOutQuart">easeInOutQuart</option>
|
||||
<option value="easeInQuint">easeInQuint</option>
|
||||
<option value="easeOutQuint">easeOutQuint</option>
|
||||
<option value="easeInOutQuint">easeInOutQuint</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="bottom">
|
||||
<span id="statusUpdate"></span><br />
|
||||
Examples:
|
||||
<input type="button" onclick="doAnimation();" value="Animate with above settings." style="width:300px;" id="btnDo"> <br/>
|
||||
<input type="button" onclick="doDefaultAnimation();" value="Animate with default settings." style="width:300px;" id="btnDoDefault"> <br/>
|
||||
<input type="button" onclick="zoomExtentAnimated();" value="Animated ZoomExtent()." style="width:300px;" id="btnZoom"> <br/>
|
||||
<input type="button" onclick="focusRandom();" value="Focus on random node." style="width:300px;" id="btnFocus"><br/>
|
||||
<input type="button" onclick="startShow();" value="Start a show!" style="width:300px;" id="btnShow"><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<p id="selection"></p>
|
||||
<p id="stabilization"></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,166 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Network | node as icon</title>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
|
||||
|
||||
<script language="JavaScript">
|
||||
function draw() {
|
||||
/*
|
||||
* Example for FontAwesome
|
||||
*/
|
||||
var optionsFA = {
|
||||
height: '300px',
|
||||
groups: {
|
||||
usergroups: {
|
||||
shape: 'icon',
|
||||
iconFontFace: 'FontAwesome',
|
||||
icon: '\uf0c0',
|
||||
iconSize: 50,
|
||||
iconColor: '#57169a'
|
||||
},
|
||||
users: {
|
||||
shape: 'icon',
|
||||
iconFontFace: 'FontAwesome',
|
||||
icon: '\uf007',
|
||||
iconSize: 50,
|
||||
iconColor: '#aa00ff'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// create an array with nodes
|
||||
var nodesFA = [{
|
||||
id: 1,
|
||||
label: 'User 1',
|
||||
group: 'users'
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'User 2',
|
||||
group: 'users'
|
||||
}, {
|
||||
id: 3,
|
||||
label: 'Usergroup 1',
|
||||
group: 'usergroups'
|
||||
}, {
|
||||
id: 4,
|
||||
label: 'Usergroup 2',
|
||||
group: 'usergroups'
|
||||
}, {
|
||||
id: 5,
|
||||
label: 'Organisation 1',
|
||||
shape: 'icon',
|
||||
iconFontFace: 'FontAwesome',
|
||||
icon: '\uf1ad',
|
||||
iconSize: 50,
|
||||
iconColor: '#f0a30a'
|
||||
}];
|
||||
|
||||
// create an array with edges
|
||||
var edges = [{
|
||||
from: 1,
|
||||
to: 3
|
||||
}, {
|
||||
from: 1,
|
||||
to: 4
|
||||
}, {
|
||||
from: 2,
|
||||
to: 4
|
||||
}, {
|
||||
from: 3,
|
||||
to: 5
|
||||
}, {
|
||||
from: 4,
|
||||
to: 5
|
||||
}];
|
||||
|
||||
// create a network
|
||||
var containerFA = document.getElementById('mynetworkFA');
|
||||
var dataFA = {
|
||||
nodes: nodesFA,
|
||||
edges: edges
|
||||
};
|
||||
|
||||
var networkFA = new vis.Network(containerFA, dataFA, optionsFA);
|
||||
|
||||
/*
|
||||
* Example for Ionicons
|
||||
*/
|
||||
var optionsIO = {
|
||||
height: '300px',
|
||||
groups: {
|
||||
usergroups: {
|
||||
shape: 'icon',
|
||||
iconFontFace: 'Ionicons',
|
||||
icon: '\uf47c',
|
||||
iconSize: 50,
|
||||
iconColor: '#57169a'
|
||||
},
|
||||
users: {
|
||||
shape: 'icon',
|
||||
iconFontFace: 'Ionicons',
|
||||
icon: '\uf47e',
|
||||
iconSize: 50,
|
||||
iconColor: '#aa00ff'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// create an array with nodes
|
||||
var nodesIO = [{
|
||||
id: 1,
|
||||
label: 'User 1',
|
||||
group: 'users'
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'User 2',
|
||||
group: 'users'
|
||||
}, {
|
||||
id: 3,
|
||||
label: 'Usergroup 1',
|
||||
group: 'usergroups'
|
||||
}, {
|
||||
id: 4,
|
||||
label: 'Usergroup 2',
|
||||
group: 'usergroups'
|
||||
}, {
|
||||
id: 5,
|
||||
label: 'Organisation 1',
|
||||
shape: 'icon',
|
||||
iconFontFace: 'Ionicons',
|
||||
icon: '\uf276',
|
||||
iconSize: 50,
|
||||
iconColor: '#f0a30a'
|
||||
}];
|
||||
|
||||
|
||||
// create a network
|
||||
var containerIO = document.getElementById('mynetworkIO');
|
||||
var dataIO = {
|
||||
nodes: nodesIO,
|
||||
edges: edges
|
||||
};
|
||||
|
||||
var networkIO = new vis.Network(containerIO, dataIO, optionsIO);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
<h2>
|
||||
<i class="fa fa-flag"></i> Use FontAwesome-icons for node</h2>
|
||||
<div id="mynetworkFA"></div>
|
||||
<h2>
|
||||
<i class="ion ion-ionic"></i> Use Ionicons-icons for node</h2>
|
||||
<div id="mynetworkIO"></div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -8,34 +8,37 @@
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 400px;
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>
|
||||
Create a simple network with some nodes and edges.
|
||||
</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// create an array with nodes
|
||||
var nodes = [
|
||||
var nodes = new vis.DataSet([
|
||||
{id: 1, label: 'Node 1'},
|
||||
{id: 2, label: 'Node 2'},
|
||||
{id: 3, label: 'Node 3'},
|
||||
{id: 4, label: 'Node 4'},
|
||||
{id: 5, label: 'Node 5'}
|
||||
];
|
||||
]);
|
||||
|
||||
// create an array with edges
|
||||
var edges = [
|
||||
{from: 1, to: 2},
|
||||
var edges = new vis.DataSet([
|
||||
{from: 1, to: 3},
|
||||
{from: 1, to: 2},
|
||||
{from: 2, to: 4},
|
||||
{from: 2, to: 5}
|
||||
];
|
||||
]);
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
@@ -47,5 +50,6 @@
|
||||
var network = new vis.Network(container, data, options);
|
||||
</script>
|
||||
|
||||
<script src="../googleAnalytics.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,140 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Dynamic Data</title>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width:600px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom:3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<p>
|
||||
You can change any settings you want while the network is initialized using the vis Dataset, setOptions and setData. Finally you can destroy the network and completely reinitialize it.
|
||||
</p>
|
||||
|
||||
<h4>DataSet (change the data while it's loaded and initialzed):</h4>
|
||||
<input type="button" onclick="addNode()" value="add node dynamically"> <br />
|
||||
<input type="button" onclick="changeNode1()" value="change node 1's color dynamically"> <br />
|
||||
<input type="button" onclick="removeRandomNode()" value="remove a random Node"> <br />
|
||||
<input type="button" onclick="resetAllNodes()" value="reload all nodes"> <br />
|
||||
<input type="button" onclick="resetAllNodesStabilize()" value="reload all nodes and stabilize"> <br />
|
||||
|
||||
<h4>setOptions (change the global options):</h4>
|
||||
<input type="button" onclick="changeOptions()" value="change the global options"><br />
|
||||
|
||||
<h4>setData (reinitialize the data): </h4>
|
||||
<input type="button" onclick="setTheData()" value="setData. This stabilizes again if stabilization is true."><br />
|
||||
|
||||
<h4>Cleanly destroy the network and restart it:</h4>
|
||||
<input type="button" onclick="resetAll()" value="Destroy the network and restart it."><br />
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodeIds, shadowState, nodesArray, nodes, edgesArray, edges, network;
|
||||
|
||||
function startNetwork() {
|
||||
// this list is kept to remove a random node.. we do not add node 1 here because it's used for changes
|
||||
nodeIds = [2, 3, 4, 5];
|
||||
shadowState = false;
|
||||
|
||||
|
||||
// create an array with nodes
|
||||
nodesArray = [
|
||||
{id: 1, label: 'Node 1'},
|
||||
{id: 2, label: 'Node 2'},
|
||||
{id: 3, label: 'Node 3'},
|
||||
{id: 4, label: 'Node 4'},
|
||||
{id: 5, label: 'Node 5'}
|
||||
];
|
||||
nodes = new vis.DataSet(nodesArray);
|
||||
|
||||
// create an array with edges
|
||||
edgesArray = [
|
||||
{from: 1, to: 3},
|
||||
{from: 1, to: 2},
|
||||
{from: 2, to: 4},
|
||||
{from: 2, to: 5}
|
||||
];
|
||||
edges = new vis.DataSet(edgesArray);
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
|
||||
function addNode() {
|
||||
var newId = (Math.random() * 1e7).toString(32);
|
||||
nodes.add({id:newId, label:"I'm new!"});
|
||||
nodeIds.push(newId);
|
||||
}
|
||||
|
||||
function changeNode1() {
|
||||
var newColor = '#' + Math.floor((Math.random() * 255 * 255 * 255)).toString(16);
|
||||
nodes.update([{id:1, color:{background:newColor}}]);
|
||||
}
|
||||
|
||||
function removeRandomNode() {
|
||||
var randomNodeId = nodeIds[Math.floor(Math.random() * nodeIds.length)];
|
||||
nodes.remove({id:randomNodeId});
|
||||
|
||||
var index = nodeIds.indexOf(randomNodeId);
|
||||
nodeIds.splice(index,1);
|
||||
}
|
||||
|
||||
function changeOptions() {
|
||||
shadowState = !shadowState;
|
||||
network.setOptions({nodes:{shadow:shadowState},edges:{shadow:shadowState}});
|
||||
}
|
||||
|
||||
function resetAllNodes() {
|
||||
nodes.clear();
|
||||
edges.clear();
|
||||
nodes.add(nodesArray);
|
||||
edges.add(edgesArray);
|
||||
}
|
||||
|
||||
function resetAllNodesStabilize() {
|
||||
resetAllNodes();
|
||||
network.stabilize();
|
||||
}
|
||||
|
||||
function setTheData() {
|
||||
nodes = new vis.DataSet(nodesArray);
|
||||
edges = new vis.DataSet(edgesArray);
|
||||
network.setData({nodes:nodes, edges:edges})
|
||||
}
|
||||
|
||||
function resetAll() {
|
||||
if (network !== null) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
startNetwork();
|
||||
}
|
||||
|
||||
startNetwork();
|
||||
</script>
|
||||
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
digraph G {
|
||||
// note: not all attributes are recognized and supported by Network
|
||||
// unrecognized attributes are ignored
|
||||
|
||||
node[width=.25,height=.375,fontsize=15]
|
||||
node [shape=filled color=#FF00FF fillcolor=#F1AAF0]
|
||||
0-> 0 ;
|
||||
1-> 1 ;
|
||||
2-> 2 ;
|
||||
3-> 3 ;
|
||||
4-> 4 ;
|
||||
5-> 5 ;
|
||||
6-> 6 ;
|
||||
7-> 5 ;
|
||||
8-> 8 ;
|
||||
9-> 9 ;
|
||||
10-> 10 ;
|
||||
11-> 10 ;
|
||||
12-> 12 ;
|
||||
13-> 5 ;
|
||||
14-> 10 ;
|
||||
15-> 0 ;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
digraph topology
|
||||
{
|
||||
node[shape=circle fontsize=12]
|
||||
edge[length=170 fontsize=12]
|
||||
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
|
||||
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
|
||||
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
|
||||
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
|
||||
"10.0.255.2" -> "10.0.255.1"[label="1.000"];
|
||||
"10.0.255.2" -> "10.0.255.3"[label="1.000"];
|
||||
"10.0.255.3" -> "10.0.255.1"[label="1.000"];
|
||||
"10.0.255.3" -> "10.0.255.2"[label="1.000"];
|
||||
"10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
|
||||
"10.0.3.0/24"[shape=box];
|
||||
"10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
|
||||
"10.0.2.0/24"[shape=box];
|
||||
"10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
|
||||
"10.0.1.0/24"[shape=box];
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
digraph {
|
||||
node [shape=circle fontsize=16]
|
||||
edge [length=100, color=gray, fontcolor=black]
|
||||
|
||||
A -> A[label=0.5];
|
||||
B -> B[label=1.2] -> C[label=0.7] -- A;
|
||||
B -> D;
|
||||
D -> {B; C}
|
||||
D -> E[label=0.2];
|
||||
F -> F;
|
||||
A [
|
||||
fontcolor=white,
|
||||
color=red,
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | DOT Language</title>
|
||||
|
||||
<script src="../../../../dist/vis.js"></script>
|
||||
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
<script src="../../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Network supports the DOT language.
|
||||
</p>
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var container = document.getElementById('mynetwork');
|
||||
var dot = 'dinetwork {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
|
||||
var data = vis.network.convertDot(dot);
|
||||
var network = new vis.Network(container, data);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,216 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | DOT language playground</title>
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
|
||||
<script src="../../../../dist/vis.js"></script>
|
||||
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
body, html {
|
||||
font: 10pt sans;
|
||||
line-height: 1.5em;;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #4d4d4d;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#header {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#contents {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#left, #right {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#data {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #d3d3d3;
|
||||
box-sizing: border-box;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
#draw {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
#mynetwork {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #d3d3d3;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="../../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="header">
|
||||
<h1>DOT language playground</h1>
|
||||
|
||||
<p>
|
||||
Play around with the DOT language in the textarea below, or select one of the following examples:
|
||||
</p>
|
||||
<p style="margin-left: 30px;">
|
||||
<a href="#" class="example" data-url="data/simple.gv.txt">simple</a>,
|
||||
<a href="#" class="example" data-url="data/computer_network.gv.txt">computer network</a>,
|
||||
<a href="#" class="example" data-url="data/cellular_automata.gv.txt">cellular automata</a>,
|
||||
<a href="#" class="example" data-url="graphvizGallery/fsm.gv.txt">fsm *</a>,
|
||||
<a href="#" class="example" data-url="graphvizGallery/hello.gv.txt">hello *</a>,
|
||||
<a href="#" class="example" data-url="graphvizGallery/process.gv.txt">process *</a>,
|
||||
<a href="#" class="example" data-url="graphvizGallery/siblings.gv.txt">siblings *</a>,
|
||||
<a href="#" class="example" data-url="graphvizGallery/softmaint.gv.txt">softmaint *</a>,
|
||||
<a href="#" class="example" data-url="graphvizGallery/traffic_lights.gv.txt">traffic lights *</a>,
|
||||
<a href="#" class="example" data-url="graphvizGallery/transparency.gv.txt">transparency *</a>,
|
||||
<a href="#" class="example" data-url="graphvizGallery/twopi2.gv.txt">twopi2 *</a>,
|
||||
<a href="#" class="example" data-url="graphvizGallery/unix.gv.txt">unix *</a>,
|
||||
<a href="#" class="example" data-url="graphvizGallery/world.gv.txt">world *</a>
|
||||
</p>
|
||||
<p>
|
||||
The examples marked with a star (*) come straight from the <a href="http://www.graphviz.org/Gallery.php">GraphViz gallery</a>.
|
||||
</p>
|
||||
<div>
|
||||
<button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
|
||||
<span id="error"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contents">
|
||||
<div id="left">
|
||||
<textarea id="data">
|
||||
digraph {
|
||||
node [shape=circle fontsize=16]
|
||||
edge [length=100, color=gray, fontcolor=black]
|
||||
|
||||
A -> A[label=0.5];
|
||||
B -> B[label=1.2] -> C[label=0.7] -- A;
|
||||
B -> D;
|
||||
D -> {B; C}
|
||||
D -> E[label=0.2];
|
||||
F -> F;
|
||||
A [
|
||||
fontcolor=white,
|
||||
color=red,
|
||||
]
|
||||
}
|
||||
</textarea>
|
||||
</div>
|
||||
<div id="right">
|
||||
<div id="mynetwork"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var options = {
|
||||
physics: {
|
||||
stabilization: false,
|
||||
barnesHut: {
|
||||
springLength: 200
|
||||
}
|
||||
}
|
||||
};
|
||||
var data = {};
|
||||
var network = new vis.Network(container, data, options);
|
||||
|
||||
$('#draw').click(draw);
|
||||
|
||||
$('a.example').click(function (event) {
|
||||
var url = $(event.target).data('url');
|
||||
$.get(url)
|
||||
.done(function(dotData) {
|
||||
$('#data').val(dotData);
|
||||
draw();
|
||||
})
|
||||
.fail(function () {
|
||||
$('#error').html('Error: Cannot fetch the example data because of security restrictions in JavaScript. Run the example from a server instead of as a local file to resolve this problem. Alternatively, you can copy/paste the data of DOT graphs manually in the textarea below.');
|
||||
resize();
|
||||
});
|
||||
});
|
||||
|
||||
$(window).resize(resize);
|
||||
$(window).load(draw);
|
||||
|
||||
$('#data').keydown(function (event) {
|
||||
if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter
|
||||
draw();
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
function resize() {
|
||||
$('#contents').height($('body').height() - $('#header').height() - 30);
|
||||
}
|
||||
|
||||
function draw () {
|
||||
try {
|
||||
resize();
|
||||
$('#error').html('');
|
||||
|
||||
// Provide a string with data in DOT language
|
||||
data = vis.network.convertDot($('#data').val());
|
||||
|
||||
network.setData(data);
|
||||
}
|
||||
catch (err) {
|
||||
// set the cursor at the position where the error occurred
|
||||
var match = /\(char (.*)\)/.exec(err);
|
||||
if (match) {
|
||||
var pos = Number(match[1]);
|
||||
var textarea = $('#data')[0];
|
||||
if(textarea.setSelectionRange) {
|
||||
textarea.focus();
|
||||
textarea.setSelectionRange(pos, pos);
|
||||
}
|
||||
}
|
||||
|
||||
// show an error message
|
||||
$('#error').html(err.toString());
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 262 KiB After Width: | Height: | Size: 262 KiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
@@ -0,0 +1,266 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | DataSet</title>
|
||||
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
font: 11pt arial;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 150%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
table.view {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
table table {
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
table table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type=text], pre {
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
#network {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes, edges, network;
|
||||
|
||||
// convenience method to stringify a JSON object
|
||||
function toJSON(obj) {
|
||||
return JSON.stringify(obj, null, 4);
|
||||
}
|
||||
|
||||
function addNode() {
|
||||
try {
|
||||
nodes.add({
|
||||
id: document.getElementById('node-id').value,
|
||||
label: document.getElementById('node-label').value
|
||||
});
|
||||
}
|
||||
catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
}
|
||||
|
||||
function updateNode() {
|
||||
try {
|
||||
nodes.update({
|
||||
id: document.getElementById('node-id').value,
|
||||
label: document.getElementById('node-label').value
|
||||
});
|
||||
}
|
||||
catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
}
|
||||
function removeNode() {
|
||||
try {
|
||||
nodes.remove({id: document.getElementById('node-id').value});
|
||||
}
|
||||
catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
}
|
||||
|
||||
function addEdge() {
|
||||
try {
|
||||
edges.add({
|
||||
id: document.getElementById('edge-id').value,
|
||||
from: document.getElementById('edge-from').value,
|
||||
to: document.getElementById('edge-to').value
|
||||
});
|
||||
}
|
||||
catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
}
|
||||
function updateEdge() {
|
||||
try {
|
||||
edges.update({
|
||||
id: document.getElementById('edge-id').value,
|
||||
from: document.getElementById('edge-from').value,
|
||||
to: document.getElementById('edge-to').value
|
||||
});
|
||||
}
|
||||
catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
}
|
||||
function removeEdge() {
|
||||
try {
|
||||
edges.remove({id: document.getElementById('edge-id').value});
|
||||
}
|
||||
catch (err) {
|
||||
alert(err);
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
// create an array with nodes
|
||||
nodes = new vis.DataSet();
|
||||
nodes.on('*', function () {
|
||||
document.getElementById('nodes').innerHTML = JSON.stringify(nodes.get(), null, 4);
|
||||
});
|
||||
nodes.add([
|
||||
{id: '1', label: 'Node 1'},
|
||||
{id: '2', label: 'Node 2'},
|
||||
{id: '3', label: 'Node 3'},
|
||||
{id: '4', label: 'Node 4'},
|
||||
{id: '5', label: 'Node 5'}
|
||||
]);
|
||||
|
||||
// create an array with edges
|
||||
edges = new vis.DataSet();
|
||||
edges.on('*', function () {
|
||||
document.getElementById('edges').innerHTML = JSON.stringify(edges.get(), null, 4);
|
||||
});
|
||||
edges.add([
|
||||
{id: '1', from: '1', to: '2'},
|
||||
{id: '2', from: '1', to: '3'},
|
||||
{id: '3', from: '2', to: '4'},
|
||||
{id: '4', from: '2', to: '5'}
|
||||
]);
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('network');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {};
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
|
||||
<p>
|
||||
This example demonstrates dynamically adding, updating and removing nodes
|
||||
and edges using a DataSet.
|
||||
</p>
|
||||
|
||||
<h1>Adjust</h1>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<h2>Node</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><label for="node-id">Id</label></td>
|
||||
<td><input id="node-id" type="text" value="6"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><label for="node-label">Label</label></td>
|
||||
<td><input id="node-label" type="text" value="Node 6"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Action</td>
|
||||
<td>
|
||||
<button id="node-add" onclick="addNode();">Add</button>
|
||||
<button id="node-update" onclick="updateNode();">Update</button>
|
||||
<button id="node-remove" onclick="removeNode();">Remove</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<h2>Edge</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><label for="edge-id">Id</label></td>
|
||||
<td><input id="edge-id" type="text" value="5"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><label for="edge-from">From</label></td>
|
||||
<td><input id="edge-from" type="text" value="3"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><label for="edge-to">To</label></td>
|
||||
<td><input id="edge-to" type="text" value="4"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Action</td>
|
||||
<td>
|
||||
<button id="edge-add" onclick="addEdge();">Add</button>
|
||||
<button id="edge-update" onclick="updateEdge();">Update</button>
|
||||
<button id="edge-remove" onclick="removeEdge();">Remove</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<h1>View</h1>
|
||||
<table class="view">
|
||||
<colgroup>
|
||||
<col width="25%">
|
||||
<col width="25%">
|
||||
<col width="50%">
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
<h2>Nodes</h2>
|
||||
<pre id="nodes"></pre>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<h2>Edges</h2>
|
||||
<pre id="edges"></pre>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<h2>Network</h2>
|
||||
|
||||
<div id="network"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF8">
|
||||
<title>Dynamic Data - Importing from Gephi (JSON)</title>
|
||||
<script type="text/javascript" src="../exampleUtil.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../../dist/vis.css">
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
|
||||
div.nodeContent {
|
||||
position: relative;
|
||||
border: 1px solid lightgray;
|
||||
width: 480px;
|
||||
height: 780px;
|
||||
margin-top: -802px;
|
||||
margin-left: 810px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.string {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.number {
|
||||
color: darkorange;
|
||||
}
|
||||
|
||||
.boolean {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.null {
|
||||
color: magenta;
|
||||
}
|
||||
|
||||
.key {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h2>Dynamic Data - Importing from Gephi (JSON)</h2>
|
||||
|
||||
<div style="width:700px; font-size:14px; text-align: justify;">
|
||||
This example shows how to import a JSON file exported by Gephi. The two
|
||||
options available for the import are
|
||||
available through the checkboxes. You can download the Gephi JSON exporter
|
||||
here:
|
||||
<a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
|
||||
All of Gephi's attributes are also contained within the node elements. This
|
||||
means you can access all of this data through the DataSet.
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<label><input type="checkbox" id="fixed" checked="checked"/> Fix in place after import.</label><br>
|
||||
<label><input type="checkbox" id="parseColor"/> Parse the color instead of
|
||||
copy (adds borders, highlights etc.)</label>
|
||||
</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
<div class="nodeContent"><h4>Node Content:</h4>
|
||||
<pre id="nodeContent"></pre>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var network;
|
||||
|
||||
var nodes = new vis.DataSet();
|
||||
var edges = new vis.DataSet();
|
||||
var gephiImported;
|
||||
var fixedCheckbox = document.getElementById('fixed');
|
||||
fixedCheckbox.onchange = redrawAll;
|
||||
|
||||
var parseColorCheckbox = document.getElementById('parseColor');
|
||||
parseColorCheckbox.onchange = redrawAll;
|
||||
|
||||
var nodeContent = document.getElementById('nodeContent');
|
||||
|
||||
loadJSON('../datasources/WorldCup2014.json', redrawAll, function(err) {console.log('error')});
|
||||
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
font: {
|
||||
face: 'Tahoma'
|
||||
}
|
||||
},
|
||||
edges: {
|
||||
width: 0.15,
|
||||
smooth: {
|
||||
type: 'continuous'
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
tooltipDelay: 200,
|
||||
hideEdgesOnDrag: true
|
||||
},
|
||||
physics: {
|
||||
stabilization: false,
|
||||
barnesHut: {
|
||||
gravitationalConstant: -10000,
|
||||
springConstant: 0.002,
|
||||
springLength: 150
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
network = new vis.Network(container, data, options);
|
||||
network.on('click', function (params) {
|
||||
if (params.nodes.length > 0) {
|
||||
var data = nodes.get(params.nodes[0]); // get the data from selected node
|
||||
nodeContent.innerHTML = JSON.stringify(data, undefined, 3); // show the data in the div
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* This function fills the DataSets. These DataSets will update the network.
|
||||
*/
|
||||
function redrawAll(gephiJSON) {
|
||||
if (gephiJSON.nodes === undefined) {
|
||||
gephiJSON = gephiImported;
|
||||
}
|
||||
else {
|
||||
gephiImported = gephiJSON;
|
||||
}
|
||||
|
||||
nodes.clear();
|
||||
edges.clear();
|
||||
|
||||
var fixed = fixedCheckbox.checked;
|
||||
var parseColor = parseColorCheckbox.checked;
|
||||
|
||||
var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {
|
||||
fixed: fixed,
|
||||
parseColor: parseColor
|
||||
});
|
||||
|
||||
// add the parsed data to the DataSets.
|
||||
nodes.add(parsed.nodes);
|
||||
edges.add(parsed.edges);
|
||||
|
||||
var data = nodes.get(2); // get the data from node 2 as example
|
||||
nodeContent.innerHTML = JSON.stringify(data,undefined,3); // show the data in the div
|
||||
network.fit(); // zoom to fit
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Sizing</title>
|
||||
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
font: 10pt arial;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function draw() {
|
||||
// create people.
|
||||
// value corresponds with the age of the person
|
||||
nodes = [
|
||||
{id: 1, value: 2, label: 'Algie' },
|
||||
{id: 2, value: 31, label: 'Alston'},
|
||||
{id: 3, value: 12, label: 'Barney'},
|
||||
{id: 4, value: 16, label: 'Coley' },
|
||||
{id: 5, value: 17, label: 'Grant' },
|
||||
{id: 6, value: 15, label: 'Langdon'},
|
||||
{id: 7, value: 6, label: 'Lee'},
|
||||
{id: 8, value: 5, label: 'Merlin'},
|
||||
{id: 9, value: 30, label: 'Mick'},
|
||||
{id: 10, value: 18, label: 'Tod'},
|
||||
];
|
||||
|
||||
// create connections between people
|
||||
// value corresponds with the amount of contact between two people
|
||||
edges = [
|
||||
{from: 2, to: 8, value: 3},
|
||||
{from: 2, to: 9, value: 5},
|
||||
{from: 2, to: 10,value: 1},
|
||||
{from: 4, to: 6, value: 8},
|
||||
{from: 5, to: 7, value: 2},
|
||||
{from: 4, to: 5, value: 1},
|
||||
{from: 9, to: 10,value: 2},
|
||||
{from: 2, to: 3, value: 6},
|
||||
{from: 3, to: 9, value: 4},
|
||||
{from: 5, to: 3, value: 1},
|
||||
{from: 2, to: 7, value: 4}
|
||||
];
|
||||
|
||||
// Instantiate our network object.
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
scaling: {
|
||||
customScalingFunction: function (min,max,total,value) {
|
||||
return value/total;
|
||||
},
|
||||
min:5,
|
||||
max:150
|
||||
}
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
<body onload="draw()">
|
||||
<p>
|
||||
Scale nodes and edges depending on their value. Hover over nodes and edges to get more information.
|
||||
</p>
|
||||
<div id="mynetwork"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Sizing</title>
|
||||
@@ -14,8 +14,8 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
@@ -26,19 +26,19 @@
|
||||
// create people.
|
||||
// value corresponds with the age of the person
|
||||
nodes = [
|
||||
{id: 1, value: 2, label:'Algie', title: 'Algie (2 years old)'},
|
||||
{id: 2, value: 31, label: 'Alston', title: 'Alston (31 years old)'},
|
||||
{id: 3, value: 12, label: 'Barney', title: 'Barney (12 years old)'},
|
||||
{id: 4, value: 16, label: 'Coley', title: 'Coley (16 years old)'},
|
||||
{id: 5, value: 17, label: 'Grant', title: 'Grant (17 years old)'},
|
||||
{id: 6, value: 15, label: 'Langdon', title: 'Langdon (15 years old)'},
|
||||
{id: 7, value: 6, label: 'Lee', title: 'Lee (6 years old)'},
|
||||
{id: 8, value: 5, label: 'Merlin', title: 'Merlin (5 years old)'},
|
||||
{id: 9, value: 30, label: 'Mick', title: 'Mick (30 years old)'},
|
||||
{id: 10, value: 18, label: 'Tod', title: 'Tod (18 years old)'}
|
||||
{id: 1, value: 2, label: 'Algie' },
|
||||
{id: 2, value: 31, label: 'Alston'},
|
||||
{id: 3, value: 12, label: 'Barney'},
|
||||
{id: 4, value: 16, label: 'Coley' },
|
||||
{id: 5, value: 17, label: 'Grant' },
|
||||
{id: 6, value: 15, label: 'Langdon'},
|
||||
{id: 7, value: 6, label: 'Lee'},
|
||||
{id: 8, value: 5, label: 'Merlin'},
|
||||
{id: 9, value: 30, label: 'Mick'},
|
||||
{id: 10, value: 18, label: 'Tod'},
|
||||
];
|
||||
|
||||
// create connections.
|
||||
// create connections between people
|
||||
// value corresponds with the amount of contact between two people
|
||||
edges = [
|
||||
{from: 2, to: 8, value: 3, title: '3 emails per week'},
|
||||
@@ -62,18 +62,18 @@
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'dot'
|
||||
},
|
||||
edges: {
|
||||
color: '#97C2FC'
|
||||
shape: 'dot',
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
<p>
|
||||
Scale nodes and edges depending on their value. Hover over the edges to get a popup with more information.
|
||||
</p>
|
||||
<div id="mynetwork"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Sizing</title>
|
||||
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
font: 10pt arial;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function draw() {
|
||||
// create people.
|
||||
// value corresponds with the age of the person
|
||||
nodes = [
|
||||
{id: 1, value: 2, label: 'Algie' },
|
||||
{id: 2, value: 31, label: 'Alston'},
|
||||
{id: 3, value: 12, label: 'Barney'},
|
||||
{id: 4, value: 16, label: 'Coley' },
|
||||
{id: 5, value: 17, label: 'Grant' },
|
||||
{id: 6, value: 15, label: 'Langdon'},
|
||||
{id: 7, value: 6, label: 'Lee'},
|
||||
{id: 8, value: 5, label: 'Merlin'},
|
||||
{id: 9, value: 30, label: 'Mick'},
|
||||
{id: 10, value: 18, label: 'Tod'},
|
||||
];
|
||||
|
||||
// create connections between people
|
||||
// value corresponds with the amount of contact between two people
|
||||
edges = [
|
||||
{from: 2, to: 8, value: 3, title: '3 emails per week'},
|
||||
{from: 2, to: 9, value: 5, title: '5 emails per week'},
|
||||
{from: 2, to: 10,value: 1, title: '1 emails per week'},
|
||||
{from: 4, to: 6, value: 8, title: '8 emails per week'},
|
||||
{from: 5, to: 7, value: 2, title: '2 emails per week'},
|
||||
{from: 4, to: 5, value: 1, title: '1 emails per week'},
|
||||
{from: 9, to: 10,value: 2, title: '2 emails per week'},
|
||||
{from: 2, to: 3, value: 6, title: '6 emails per week'},
|
||||
{from: 3, to: 9, value: 4, title: '4 emails per week'},
|
||||
{from: 5, to: 3, value: 1, title: '1 emails per week'},
|
||||
{from: 2, to: 7, value: 4, title: '4 emails per week'}
|
||||
];
|
||||
|
||||
// Instantiate our network object.
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
scaling:{
|
||||
label: {
|
||||
min:8,
|
||||
max:20
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
<body onload="draw()">
|
||||
<p>
|
||||
Scale nodes and edges depending on their value. Hover over edges to get a popup with more information.
|
||||
</p>
|
||||
<div id="mynetwork"></div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,61 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Basic usage</title>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
There are a lot of options with arrows! They can also be combined with dashed lines.
|
||||
</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// create an array with nodes
|
||||
var nodes = new vis.DataSet([
|
||||
{id: 1, label: 'Node 1'},
|
||||
{id: 2, label: 'Node 2'},
|
||||
{id: 3, label: 'Node 3'},
|
||||
{id: 4, label: 'Node 4'},
|
||||
{id: 5, label: 'Node 5'},
|
||||
{id: 6, label: 'Node 6'},
|
||||
{id: 7, label: 'Node 7'},
|
||||
{id: 8, label: 'Node 8'}
|
||||
]);
|
||||
|
||||
// create an array with edges
|
||||
var edges = new vis.DataSet([
|
||||
{from: 1, to: 8, arrows:'to', dashes:true},
|
||||
{from: 1, to: 3, arrows:'to'},
|
||||
{from: 1, to: 2, arrows:'to, from'},
|
||||
{from: 2, to: 4, arrows:'to, middle'},
|
||||
{from: 2, to: 5, arrows:'to, middle, from'},
|
||||
{from: 5, to: 6, arrows:{to:{scaleFactor:2}}},
|
||||
{from: 6, to: 7, arrows:{middle:{scaleFactor:0.5},from:true}}
|
||||
]);
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {};
|
||||
var network = new vis.Network(container, data, options);
|
||||
</script>
|
||||
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,67 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Basic usage</title>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width:800px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
There are a lot of options with colors. You can manually define a color or inherit the color from the nodes. You can set the opacity
|
||||
to override any opacity given by a color. <b>IN ORDER TO USE THE OPACITY, BOTH THE NODES AND THE EDGES NEED COLORS IN HEX OR RGB</b>!
|
||||
</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// create an array with nodes
|
||||
var nodes = new vis.DataSet([
|
||||
{id: 1, label: 1, color:'#97C2FC'},
|
||||
{id: 2, label: 2, color:'#FFFF00'},
|
||||
{id: 3, label: 3, color:'#FB7E81'},
|
||||
{id: 4, label: 4, color:'#7BE141'},
|
||||
{id: 5, label: 5, color:'#6E6EFD'},
|
||||
{id: 6, label: 6, color:'#C2FABC'},
|
||||
{id: 7, label: 7, color:'#FFA807'},
|
||||
{id: 8, label: 8, color:'#6E6EFD'}
|
||||
]);
|
||||
|
||||
// create an array with edges
|
||||
var edges = new vis.DataSet([
|
||||
{from: 1, to: 8, color:{color:'red'}},
|
||||
{from: 1, to: 3, color:'rgb(20,24,200)'},
|
||||
{from: 1, to: 2, color:{color:'rgba(30,30,30,0.2)', highlight:'blue'}},
|
||||
{from: 2, to: 4, color:{inherit:'to'}},
|
||||
{from: 2, to: 5, color:{inherit:'from'}},
|
||||
{from: 5, to: 6, color:{inherit:'both'}},
|
||||
{from: 6, to: 7, color:{color:'#ff0000', opacity:0.3}},
|
||||
{from: 6, to: 8, color:{opacity:0.3}},
|
||||
]);
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {};
|
||||
var network = new vis.Network(container, data, options);
|
||||
</script>
|
||||
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+19
-13
@@ -3,39 +3,44 @@
|
||||
<head>
|
||||
<title>Network | Basic usage</title>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 400px;
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>
|
||||
Playing with dashes.
|
||||
</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// create an array with nodes
|
||||
var nodes = [
|
||||
var nodes = new vis.DataSet([
|
||||
{id: 1, label: 'Node 1'},
|
||||
{id: 2, label: 'Node 2'},
|
||||
{id: 3, label: 'Node 3'},
|
||||
{id: 4, label: 'Node 4'},
|
||||
{id: 5, label: 'Node 5'}
|
||||
];
|
||||
{id: 5, label: 'Node 5'},
|
||||
{id: 6, label: 'Node 6'}
|
||||
]);
|
||||
|
||||
// create an array with edges
|
||||
var edges = [
|
||||
{from: 1, to: 2, label: '1 to 2', labelAlignment:'line-center', fontFill:'orange' },
|
||||
{from: 1, to: 3, label: '1 to 3', labelAlignment:'line-above', fontFill:'green'},
|
||||
{from: 2, to: 4, label: '2 to 4', fontFill:'red'},
|
||||
{from: 2, to: 5, label: '2 to 5', labelAlignment:'line-below', fontFill:'#ccd' }
|
||||
];
|
||||
var edges = new vis.DataSet([
|
||||
{from: 1, to: 3, dashes:true},
|
||||
{from: 1, to: 2, dashes:[5,5]},
|
||||
{from: 2, to: 4, dashes:[5,5,3,3]},
|
||||
{from: 2, to: 5, dashes:[2,2,10,10]},
|
||||
{from: 2, to: 6, dashes:false},
|
||||
]);
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
@@ -47,5 +52,6 @@
|
||||
var network = new vis.Network(container, data, options);
|
||||
</script>
|
||||
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,120 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Static smooth curves</title>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h2>Smooth curves</h2>
|
||||
<div style="width:700px; font-size:14px; text-align: justify;">
|
||||
All the smooth curves in the examples so far have been using dynamic smooth curves. This means that each curve has a
|
||||
support node which takes part in the physics simulation. For large networks or dense clusters, this may not be the ideal
|
||||
solution. To solve this, static smooth curves have been added. The static smooth curves are based only on the positions of the connected
|
||||
nodes. There are multiple ways to determine the way this curve is drawn. This example shows the effect of the different
|
||||
types. <br /> <br />
|
||||
Drag the node around to see how the smooth curves are drawn for each setting. For animated system, we
|
||||
recommend only the continuous mode. In the next example you can see the effect of these methods on a large network. Keep in mind
|
||||
that the direction (the from and to) of the curve matters.
|
||||
<br /> <br />
|
||||
When you select the dynamic type, you can see the interaction with the fixed node and the edge, any other type will not interact with other nodes.
|
||||
<br /> <br />
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Smooth curve type:
|
||||
<select id="dropdownID" onchange="update();">
|
||||
<option value="continuous" selected="selected">continuous</option>
|
||||
<option value="discrete">discrete</option>
|
||||
<option value="diagonalCross">diagonalCross</option>
|
||||
<option value="straightCross">straightCross</option>
|
||||
<option value="horizontal">horizontal</option>
|
||||
<option value="vertical">vertical</option>
|
||||
<option value="curvedCW">curvedCW</option>
|
||||
<option value="curvedCCW">curvedCCW</option>
|
||||
<option value="dynamic">dynamic</option>
|
||||
<option value="none">none</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05" style="width:200px" id="roundnessSlider" onchange="update();"> <input id="roundnessScreen" style="width:30px;" value="0.5"> <br>(0.5 is max roundness for continuous, 1.0 for the others)
|
||||
</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var dropdown = document.getElementById("dropdownID");
|
||||
var roundnessSlider = document.getElementById("roundnessSlider");
|
||||
var roundnessScreen = document.getElementById("roundnessScreen");
|
||||
// create an array with nodes
|
||||
var nodes = [
|
||||
{id: 1, label: 'Fixed node', x:0, y:0, fixed:true},
|
||||
{id: 2, label: 'Drag me', x:150, y:130, physics:false},
|
||||
{id: 3, label: 'Obstacle', x:80, y:-80, fixed:true, mass:5}
|
||||
];
|
||||
|
||||
// create an array with edges
|
||||
var edges = [
|
||||
{from: 1, to: 2, arrows:'to'}
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
physics:true,
|
||||
edges: {
|
||||
smooth: {
|
||||
type: 'continuous'
|
||||
}
|
||||
}
|
||||
};
|
||||
var network = new vis.Network(container, data, options);
|
||||
|
||||
function update() {
|
||||
var type = dropdown.value;
|
||||
var options;
|
||||
var roundness = parseFloat(roundnessSlider.value);
|
||||
roundnessScreen.value = roundness;
|
||||
if (type === 'none') {
|
||||
options = {
|
||||
edges: {
|
||||
smooth: false
|
||||
}
|
||||
};
|
||||
}
|
||||
else {
|
||||
options = {
|
||||
edges: {
|
||||
smooth: {
|
||||
type: type,
|
||||
roundness: roundness
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
network.setOptions(options);
|
||||
}
|
||||
|
||||
update();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!doctype html>
|
||||
<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF8">
|
||||
<title>Network | Static smooth curves - World Cup Network</title>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../../dist/vis.css">
|
||||
|
||||
<script src="../datasources/WorldCup2014.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
#optionsContainer {
|
||||
height:280px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h2>Static smooth curves - World Cup Network</h2>
|
||||
|
||||
<div style="width:700px; font-size:14px;">
|
||||
The static smooth curves are based only on the positions of the connected
|
||||
nodes.
|
||||
There are multiple ways to determine the way this curve is drawn.
|
||||
This example shows the effect of the different types on a large network.
|
||||
<br/> <br/>
|
||||
Also shown in this example is the inheritColor option of the edges as well as
|
||||
the roundness factor. Because the physics has been disabled, the dynamic smooth curves do not work here.
|
||||
</div>
|
||||
|
||||
<div id="optionsContainer"></div>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var network;
|
||||
|
||||
function redrawAll() {
|
||||
var container = document.getElementById('mynetwork');
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
scaling: {
|
||||
min: 10,
|
||||
max: 30
|
||||
},
|
||||
font: {
|
||||
size: 12,
|
||||
face: 'Tahoma'
|
||||
}
|
||||
},
|
||||
edges: {
|
||||
color:{inherit:true},
|
||||
width: 0.15,
|
||||
smooth: {
|
||||
type: 'continuous'
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
hideEdgesOnDrag: true,
|
||||
tooltipDelay: 200
|
||||
},
|
||||
configure: {
|
||||
filter: function (option, path) {
|
||||
if (option === 'inherit') {return true;}
|
||||
if (option === 'type' && path.indexOf("smooth") !== -1) {return true;}
|
||||
if (option === 'roundness') {return true;}
|
||||
if (option === 'hideEdgesOnDrag') {return true;}
|
||||
if (option === 'hideNodesOnDrag') {return true;}
|
||||
return false;
|
||||
},
|
||||
container: document.getElementById('optionsContainer'),
|
||||
showButton: false
|
||||
},
|
||||
physics: false
|
||||
};
|
||||
|
||||
var data = {nodes:nodes, edges:edges};
|
||||
// Note: data is coming from ./data/WorldCup2014.js
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
|
||||
redrawAll()
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,119 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Interaction events</title>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
Create a simple network with some nodes and edges. Some of the events are logged in the console in improve readability.
|
||||
</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
<pre id="eventSpan"></pre>
|
||||
|
||||
<script type="text/javascript">
|
||||
// create an array with nodes
|
||||
var nodes = new vis.DataSet([
|
||||
{id: 1, label: 'Node 1', title: 'I have a popup!'},
|
||||
{id: 2, label: 'Node 2', title: 'I have a popup!'},
|
||||
{id: 3, label: 'Node 3', title: 'I have a popup!'},
|
||||
{id: 4, label: 'Node 4', title: 'I have a popup!'},
|
||||
{id: 5, label: 'Node 5', title: 'I have a popup!'}
|
||||
]);
|
||||
|
||||
// create an array with edges
|
||||
var edges = new vis.DataSet([
|
||||
{from: 1, to: 3},
|
||||
{from: 1, to: 2},
|
||||
{from: 2, to: 4},
|
||||
{from: 2, to: 5}
|
||||
]);
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {interaction:{hover:true}};
|
||||
var network = new vis.Network(container, data, options);
|
||||
|
||||
network.on("click", function (params) {
|
||||
params.event = "[original event]";
|
||||
document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
|
||||
});
|
||||
network.on("doubleClick", function (params) {
|
||||
params.event = "[original event]";
|
||||
document.getElementById('eventSpan').innerHTML = '<h2>doubleClick event:</h2>' + JSON.stringify(params, null, 4);
|
||||
});
|
||||
network.on("oncontext", function (params) {
|
||||
params.event = "[original event]";
|
||||
document.getElementById('eventSpan').innerHTML = '<h2>oncontext (right click) event:</h2>' + JSON.stringify(params, null, 4);
|
||||
});
|
||||
network.on("dragStart", function (params) {
|
||||
params.event = "[original event]";
|
||||
document.getElementById('eventSpan').innerHTML = '<h2>dragStart event:</h2>' + JSON.stringify(params, null, 4);
|
||||
});
|
||||
network.on("dragging", function (params) {
|
||||
params.event = "[original event]";
|
||||
document.getElementById('eventSpan').innerHTML = '<h2>dragging event:</h2>' + JSON.stringify(params, null, 4);
|
||||
});
|
||||
network.on("dragEnd", function (params) {
|
||||
params.event = "[original event]";
|
||||
document.getElementById('eventSpan').innerHTML = '<h2>dragEnd event:</h2>' + JSON.stringify(params, null, 4);
|
||||
});
|
||||
network.on("zoom", function (params) {
|
||||
document.getElementById('eventSpan').innerHTML = '<h2>zoom event:</h2>' + JSON.stringify(params, null, 4);
|
||||
});
|
||||
network.on("showPopup", function (params) {
|
||||
document.getElementById('eventSpan').innerHTML = '<h2>showPopup event: </h2>' + JSON.stringify(params, null, 4);
|
||||
});
|
||||
network.on("hidePopup", function () {
|
||||
console.log('hidePopup Event');
|
||||
});
|
||||
network.on("select", function (params) {
|
||||
console.log('select Event:', params);
|
||||
});
|
||||
network.on("selectNode", function (params) {
|
||||
console.log('selectNode Event:', params);
|
||||
});
|
||||
network.on("selectEdge", function (params) {
|
||||
console.log('selectEdge Event:', params);
|
||||
});
|
||||
network.on("deselectNode", function (params) {
|
||||
console.log('deselectNode Event:', params);
|
||||
});
|
||||
network.on("deselectEdge", function (params) {
|
||||
console.log('deselectEdge Event:', params);
|
||||
});
|
||||
network.on("hoverNode", function (params) {
|
||||
console.log('hoverNode Event:', params);
|
||||
});
|
||||
network.on("hoverEdge", function (params) {
|
||||
console.log('hoverEdge Event:', params);
|
||||
});
|
||||
network.on("blurNode", function (params) {
|
||||
console.log('blurNode Event:', params);
|
||||
});
|
||||
network.on("blurEdge", function (params) {
|
||||
console.log('blurEdge Event:', params);
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,73 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Basic usage</title>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
Create a simple network with some nodes and edges.
|
||||
</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
<pre id="eventSpan"></pre>
|
||||
<script type="text/javascript">
|
||||
// create an array with nodes
|
||||
var nodes = new vis.DataSet([
|
||||
{id: 1, label: 'Node 1'},
|
||||
{id: 2, label: 'Node 2'},
|
||||
{id: 3, label: 'Node 3'},
|
||||
{id: 4, label: 'Node 4'},
|
||||
{id: 5, label: 'Node 5'}
|
||||
]);
|
||||
|
||||
// create an array with edges
|
||||
var edges = new vis.DataSet([
|
||||
{from: 1, to: 3},
|
||||
{from: 1, to: 2},
|
||||
{from: 2, to: 4},
|
||||
{from: 2, to: 5}
|
||||
]);
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {};
|
||||
var network = new vis.Network(container, data, options);
|
||||
|
||||
network.on("startStabilizing", function (params) {
|
||||
document.getElementById('eventSpan').innerHTML = '<h3>Starting Stabilization</h3>';
|
||||
console.log("started")
|
||||
});
|
||||
network.on("stabilizationProgress", function (params) {
|
||||
document.getElementById('eventSpan').innerHTML = '<h3>Stabilization progress</h3>' + JSON.stringify(params, null, 4);
|
||||
console.log("progress:",params);
|
||||
});
|
||||
network.on("stabilizationIterationsDone", function (params) {
|
||||
document.getElementById('eventSpan').innerHTML = '<h3>Stabilization iterations complete</h3>';
|
||||
console.log("finished stabilization interations");
|
||||
});
|
||||
network.on("stabilized", function (params) {
|
||||
document.getElementById('eventSpan').innerHTML = '<h3>Stabilized!</h3>' + JSON.stringify(params, null, 4);
|
||||
console.log("stabilized!", params);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Basic usage</title>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width:600px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
You can draw on the canvas using normal HTML5 canvas functions. The before drawing will be behind the network, the after drawing will be in front of the network.
|
||||
</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
<pre id="eventSpan"></pre>
|
||||
<script type="text/javascript">
|
||||
// create an array with nodes
|
||||
var nodes = new vis.DataSet([
|
||||
{id: 1, label: 'Node 1'},
|
||||
{id: 2, label: 'Node 2'},
|
||||
{id: 3, label: 'Node 3'},
|
||||
{id: 4, label: 'Node 4'},
|
||||
{id: 5, label: 'Node 5'}
|
||||
]);
|
||||
|
||||
// create an array with edges
|
||||
var edges = new vis.DataSet([
|
||||
{from: 1, to: 3},
|
||||
{from: 1, to: 2},
|
||||
{from: 2, to: 4},
|
||||
{from: 2, to: 5}
|
||||
]);
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {};
|
||||
var network = new vis.Network(container, data, options);
|
||||
|
||||
network.on("initRedraw", function () {
|
||||
// do something like move some custom elements?
|
||||
});
|
||||
network.on("beforeDrawing", function (ctx) {
|
||||
var nodeId = 1;
|
||||
var nodePosition = network.getPositions([nodeId]);
|
||||
ctx.strokeStyle = '#A6D5F7';
|
||||
ctx.fillStyle = '#294475';
|
||||
ctx.circle(nodePosition[nodeId].x, nodePosition[nodeId].y,50);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
});
|
||||
network.on("afterDrawing", function (ctx) {
|
||||
var nodeId = 1;
|
||||
var nodePosition = network.getPositions([nodeId]);
|
||||
ctx.strokeStyle = '#294475';
|
||||
ctx.lineWidth = 4;
|
||||
ctx.fillStyle = '#A6D5F7';
|
||||
ctx.circle(nodePosition[nodeId].x, nodePosition[nodeId].y,20);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,396 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Les miserables</title>
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 900px;
|
||||
height: 900px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript">
|
||||
function draw() {
|
||||
// create some nodes
|
||||
var nodes = [
|
||||
{id: 0, "label": "Myriel", "group": 1},
|
||||
{id: 1, "label": "Napoleon", "group": 1},
|
||||
{id: 2, "label": "Mlle.Baptistine", "group": 1},
|
||||
{id: 3, "label": "Mme.Magloire", "group": 1},
|
||||
{id: 4, "label": "CountessdeLo", "group": 1},
|
||||
{id: 5, "label": "Geborand", "group": 1},
|
||||
{id: 6, "label": "Champtercier", "group": 1},
|
||||
{id: 7, "label": "Cravatte", "group": 1},
|
||||
{id: 8, "label": "Count", "group": 1},
|
||||
{id: 9, "label": "OldMan", "group": 1},
|
||||
{id: 10, "label": "Labarre", "group": 2},
|
||||
{id: 11, "label": "Valjean", "group": 2},
|
||||
{id: 12, "label": "Marguerite", "group": 3},
|
||||
{id: 13, "label": "Mme.deR", "group": 2},
|
||||
{id: 14, "label": "Isabeau", "group": 2},
|
||||
{id: 15, "label": "Gervais", "group": 2},
|
||||
{id: 16, "label": "Tholomyes", "group": 3},
|
||||
{id: 17, "label": "Listolier", "group": 3},
|
||||
{id: 18, "label": "Fameuil", "group": 3},
|
||||
{id: 19, "label": "Blacheville", "group": 3},
|
||||
{id: 20, "label": "Favourite", "group": 3},
|
||||
{id: 21, "label": "Dahlia", "group": 3},
|
||||
{id: 22, "label": "Zephine", "group": 3},
|
||||
{id: 23, "label": "Fantine", "group": 3},
|
||||
{id: 24, "label": "Mme.Thenardier", "group": 4},
|
||||
{id: 25, "label": "Thenardier", "group": 4},
|
||||
{id: 26, "label": "Cosette", "group": 5},
|
||||
{id: 27, "label": "Javert", "group": 4},
|
||||
{id: 28, "label": "Fauchelevent", "group": 0},
|
||||
{id: 29, "label": "Bamatabois", "group": 2},
|
||||
{id: 30, "label": "Perpetue", "group": 3},
|
||||
{id: 31, "label": "Simplice", "group": 2},
|
||||
{id: 32, "label": "Scaufflaire", "group": 2},
|
||||
{id: 33, "label": "Woman1", "group": 2},
|
||||
{id: 34, "label": "Judge", "group": 2},
|
||||
{id: 35, "label": "Champmathieu", "group": 2},
|
||||
{id: 36, "label": "Brevet", "group": 2},
|
||||
{id: 37, "label": "Chenildieu", "group": 2},
|
||||
{id: 38, "label": "Cochepaille", "group": 2},
|
||||
{id: 39, "label": "Pontmercy", "group": 4},
|
||||
{id: 40, "label": "Boulatruelle", "group": 6},
|
||||
{id: 41, "label": "Eponine", "group": 4},
|
||||
{id: 42, "label": "Anzelma", "group": 4},
|
||||
{id: 43, "label": "Woman2", "group": 5},
|
||||
{id: 44, "label": "MotherInnocent", "group": 0},
|
||||
{id: 45, "label": "Gribier", "group": 0},
|
||||
{id: 46, "label": "Jondrette", "group": 7},
|
||||
{id: 47, "label": "Mme.Burgon", "group": 7},
|
||||
{id: 48, "label": "Gavroche", "group": 8},
|
||||
{id: 49, "label": "Gillenormand", "group": 5},
|
||||
{id: 50, "label": "Magnon", "group": 5},
|
||||
{id: 51, "label": "Mlle.Gillenormand", "group": 5},
|
||||
{id: 52, "label": "Mme.Pontmercy", "group": 5},
|
||||
{id: 53, "label": "Mlle.Vaubois", "group": 5},
|
||||
{id: 54, "label": "Lt.Gillenormand", "group": 5},
|
||||
{id: 55, "label": "Marius", "group": 8},
|
||||
{id: 56, "label": "BaronessT", "group": 5},
|
||||
{id: 57, "label": "Mabeuf", "group": 8},
|
||||
{id: 58, "label": "Enjolras", "group": 8},
|
||||
{id: 59, "label": "Combeferre", "group": 8},
|
||||
{id: 60, "label": "Prouvaire", "group": 8},
|
||||
{id: 61, "label": "Feuilly", "group": 8},
|
||||
{id: 62, "label": "Courfeyrac", "group": 8},
|
||||
{id: 63, "label": "Bahorel", "group": 8},
|
||||
{id: 64, "label": "Bossuet", "group": 8},
|
||||
{id: 65, "label": "Joly", "group": 8},
|
||||
{id: 66, "label": "Grantaire", "group": 8},
|
||||
{id: 67, "label": "MotherPlutarch", "group": 9},
|
||||
{id: 68, "label": "Gueulemer", "group": 4},
|
||||
{id: 69, "label": "Babet", "group": 4},
|
||||
{id: 70, "label": "Claquesous", "group": 4},
|
||||
{id: 71, "label": "Montparnasse", "group": 4},
|
||||
{id: 72, "label": "Toussaint", "group": 5},
|
||||
{id: 73, "label": "Child1", "group": 10},
|
||||
{id: 74, "label": "Child2", "group": 10},
|
||||
{id: 75, "label": "Brujon", "group": 4},
|
||||
{id: 76, "label": "Mme.Hucheloup", "group": 8}
|
||||
];
|
||||
|
||||
// create some edges
|
||||
var edges = [
|
||||
{"from": 1, "to": 0},
|
||||
{"from": 2, "to": 0},
|
||||
{"from": 3, "to": 0},
|
||||
{"from": 3, "to": 2},
|
||||
{"from": 4, "to": 0},
|
||||
{"from": 5, "to": 0},
|
||||
{"from": 6, "to": 0},
|
||||
{"from": 7, "to": 0},
|
||||
{"from": 8, "to": 0},
|
||||
{"from": 9, "to": 0},
|
||||
{"from": 11, "to": 10},
|
||||
{"from": 11, "to": 3},
|
||||
{"from": 11, "to": 2},
|
||||
{"from": 11, "to": 0},
|
||||
{"from": 12, "to": 11},
|
||||
{"from": 13, "to": 11},
|
||||
{"from": 14, "to": 11},
|
||||
{"from": 15, "to": 11},
|
||||
{"from": 17, "to": 16},
|
||||
{"from": 18, "to": 16},
|
||||
{"from": 18, "to": 17},
|
||||
{"from": 19, "to": 16},
|
||||
{"from": 19, "to": 17},
|
||||
{"from": 19, "to": 18},
|
||||
{"from": 20, "to": 16},
|
||||
{"from": 20, "to": 17},
|
||||
{"from": 20, "to": 18},
|
||||
{"from": 20, "to": 19},
|
||||
{"from": 21, "to": 16},
|
||||
{"from": 21, "to": 17},
|
||||
{"from": 21, "to": 18},
|
||||
{"from": 21, "to": 19},
|
||||
{"from": 21, "to": 20},
|
||||
{"from": 22, "to": 16},
|
||||
{"from": 22, "to": 17},
|
||||
{"from": 22, "to": 18},
|
||||
{"from": 22, "to": 19},
|
||||
{"from": 22, "to": 20},
|
||||
{"from": 22, "to": 21},
|
||||
{"from": 23, "to": 16},
|
||||
{"from": 23, "to": 17},
|
||||
{"from": 23, "to": 18},
|
||||
{"from": 23, "to": 19},
|
||||
{"from": 23, "to": 20},
|
||||
{"from": 23, "to": 21},
|
||||
{"from": 23, "to": 22},
|
||||
{"from": 23, "to": 12},
|
||||
{"from": 23, "to": 11},
|
||||
{"from": 24, "to": 23},
|
||||
{"from": 24, "to": 11},
|
||||
{"from": 25, "to": 24},
|
||||
{"from": 25, "to": 23},
|
||||
{"from": 25, "to": 11},
|
||||
{"from": 26, "to": 24},
|
||||
{"from": 26, "to": 11},
|
||||
{"from": 26, "to": 16},
|
||||
{"from": 26, "to": 25},
|
||||
{"from": 27, "to": 11},
|
||||
{"from": 27, "to": 23},
|
||||
{"from": 27, "to": 25},
|
||||
{"from": 27, "to": 24},
|
||||
{"from": 27, "to": 26},
|
||||
{"from": 28, "to": 11},
|
||||
{"from": 28, "to": 27},
|
||||
{"from": 29, "to": 23},
|
||||
{"from": 29, "to": 27},
|
||||
{"from": 29, "to": 11},
|
||||
{"from": 30, "to": 23},
|
||||
{"from": 31, "to": 30},
|
||||
{"from": 31, "to": 11},
|
||||
{"from": 31, "to": 23},
|
||||
{"from": 31, "to": 27},
|
||||
{"from": 32, "to": 11},
|
||||
{"from": 33, "to": 11},
|
||||
{"from": 33, "to": 27},
|
||||
{"from": 34, "to": 11},
|
||||
{"from": 34, "to": 29},
|
||||
{"from": 35, "to": 11},
|
||||
{"from": 35, "to": 34},
|
||||
{"from": 35, "to": 29},
|
||||
{"from": 36, "to": 34},
|
||||
{"from": 36, "to": 35},
|
||||
{"from": 36, "to": 11},
|
||||
{"from": 36, "to": 29},
|
||||
{"from": 37, "to": 34},
|
||||
{"from": 37, "to": 35},
|
||||
{"from": 37, "to": 36},
|
||||
{"from": 37, "to": 11},
|
||||
{"from": 37, "to": 29},
|
||||
{"from": 38, "to": 34},
|
||||
{"from": 38, "to": 35},
|
||||
{"from": 38, "to": 36},
|
||||
{"from": 38, "to": 37},
|
||||
{"from": 38, "to": 11},
|
||||
{"from": 38, "to": 29},
|
||||
{"from": 39, "to": 25},
|
||||
{"from": 40, "to": 25},
|
||||
{"from": 41, "to": 24},
|
||||
{"from": 41, "to": 25},
|
||||
{"from": 42, "to": 41},
|
||||
{"from": 42, "to": 25},
|
||||
{"from": 42, "to": 24},
|
||||
{"from": 43, "to": 11},
|
||||
{"from": 43, "to": 26},
|
||||
{"from": 43, "to": 27},
|
||||
{"from": 44, "to": 28},
|
||||
{"from": 44, "to": 11},
|
||||
{"from": 45, "to": 28},
|
||||
{"from": 47, "to": 46},
|
||||
{"from": 48, "to": 47},
|
||||
{"from": 48, "to": 25},
|
||||
{"from": 48, "to": 27},
|
||||
{"from": 48, "to": 11},
|
||||
{"from": 49, "to": 26},
|
||||
{"from": 49, "to": 11},
|
||||
{"from": 50, "to": 49},
|
||||
{"from": 50, "to": 24},
|
||||
{"from": 51, "to": 49},
|
||||
{"from": 51, "to": 26},
|
||||
{"from": 51, "to": 11},
|
||||
{"from": 52, "to": 51},
|
||||
{"from": 52, "to": 39},
|
||||
{"from": 53, "to": 51},
|
||||
{"from": 54, "to": 51},
|
||||
{"from": 54, "to": 49},
|
||||
{"from": 54, "to": 26},
|
||||
{"from": 55, "to": 51},
|
||||
{"from": 55, "to": 49},
|
||||
{"from": 55, "to": 39},
|
||||
{"from": 55, "to": 54},
|
||||
{"from": 55, "to": 26},
|
||||
{"from": 55, "to": 11},
|
||||
{"from": 55, "to": 16},
|
||||
{"from": 55, "to": 25},
|
||||
{"from": 55, "to": 41},
|
||||
{"from": 55, "to": 48},
|
||||
{"from": 56, "to": 49},
|
||||
{"from": 56, "to": 55},
|
||||
{"from": 57, "to": 55},
|
||||
{"from": 57, "to": 41},
|
||||
{"from": 57, "to": 48},
|
||||
{"from": 58, "to": 55},
|
||||
{"from": 58, "to": 48},
|
||||
{"from": 58, "to": 27},
|
||||
{"from": 58, "to": 57},
|
||||
{"from": 58, "to": 11},
|
||||
{"from": 59, "to": 58},
|
||||
{"from": 59, "to": 55},
|
||||
{"from": 59, "to": 48},
|
||||
{"from": 59, "to": 57},
|
||||
{"from": 60, "to": 48},
|
||||
{"from": 60, "to": 58},
|
||||
{"from": 60, "to": 59},
|
||||
{"from": 61, "to": 48},
|
||||
{"from": 61, "to": 58},
|
||||
{"from": 61, "to": 60},
|
||||
{"from": 61, "to": 59},
|
||||
{"from": 61, "to": 57},
|
||||
{"from": 61, "to": 55},
|
||||
{"from": 62, "to": 55},
|
||||
{"from": 62, "to": 58},
|
||||
{"from": 62, "to": 59},
|
||||
{"from": 62, "to": 48},
|
||||
{"from": 62, "to": 57},
|
||||
{"from": 62, "to": 41},
|
||||
{"from": 62, "to": 61},
|
||||
{"from": 62, "to": 60},
|
||||
{"from": 63, "to": 59},
|
||||
{"from": 63, "to": 48},
|
||||
{"from": 63, "to": 62},
|
||||
{"from": 63, "to": 57},
|
||||
{"from": 63, "to": 58},
|
||||
{"from": 63, "to": 61},
|
||||
{"from": 63, "to": 60},
|
||||
{"from": 63, "to": 55},
|
||||
{"from": 64, "to": 55},
|
||||
{"from": 64, "to": 62},
|
||||
{"from": 64, "to": 48},
|
||||
{"from": 64, "to": 63},
|
||||
{"from": 64, "to": 58},
|
||||
{"from": 64, "to": 61},
|
||||
{"from": 64, "to": 60},
|
||||
{"from": 64, "to": 59},
|
||||
{"from": 64, "to": 57},
|
||||
{"from": 64, "to": 11},
|
||||
{"from": 65, "to": 63},
|
||||
{"from": 65, "to": 64},
|
||||
{"from": 65, "to": 48},
|
||||
{"from": 65, "to": 62},
|
||||
{"from": 65, "to": 58},
|
||||
{"from": 65, "to": 61},
|
||||
{"from": 65, "to": 60},
|
||||
{"from": 65, "to": 59},
|
||||
{"from": 65, "to": 57},
|
||||
{"from": 65, "to": 55},
|
||||
{"from": 66, "to": 64},
|
||||
{"from": 66, "to": 58},
|
||||
{"from": 66, "to": 59},
|
||||
{"from": 66, "to": 62},
|
||||
{"from": 66, "to": 65},
|
||||
{"from": 66, "to": 48},
|
||||
{"from": 66, "to": 63},
|
||||
{"from": 66, "to": 61},
|
||||
{"from": 66, "to": 60},
|
||||
{"from": 67, "to": 57},
|
||||
{"from": 68, "to": 25},
|
||||
{"from": 68, "to": 11},
|
||||
{"from": 68, "to": 24},
|
||||
{"from": 68, "to": 27},
|
||||
{"from": 68, "to": 48},
|
||||
{"from": 68, "to": 41},
|
||||
{"from": 69, "to": 25},
|
||||
{"from": 69, "to": 68},
|
||||
{"from": 69, "to": 11},
|
||||
{"from": 69, "to": 24},
|
||||
{"from": 69, "to": 27},
|
||||
{"from": 69, "to": 48},
|
||||
{"from": 69, "to": 41},
|
||||
{"from": 70, "to": 25},
|
||||
{"from": 70, "to": 69},
|
||||
{"from": 70, "to": 68},
|
||||
{"from": 70, "to": 11},
|
||||
{"from": 70, "to": 24},
|
||||
{"from": 70, "to": 27},
|
||||
{"from": 70, "to": 41},
|
||||
{"from": 70, "to": 58},
|
||||
{"from": 71, "to": 27},
|
||||
{"from": 71, "to": 69},
|
||||
{"from": 71, "to": 68},
|
||||
{"from": 71, "to": 70},
|
||||
{"from": 71, "to": 11},
|
||||
{"from": 71, "to": 48},
|
||||
{"from": 71, "to": 41},
|
||||
{"from": 71, "to": 25},
|
||||
{"from": 72, "to": 26},
|
||||
{"from": 72, "to": 27},
|
||||
{"from": 72, "to": 11},
|
||||
{"from": 73, "to": 48},
|
||||
{"from": 74, "to": 48},
|
||||
{"from": 74, "to": 73},
|
||||
{"from": 75, "to": 69},
|
||||
{"from": 75, "to": 68},
|
||||
{"from": 75, "to": 25},
|
||||
{"from": 75, "to": 48},
|
||||
{"from": 75, "to": 41},
|
||||
{"from": 75, "to": 70},
|
||||
{"from": 75, "to": 71},
|
||||
{"from": 76, "to": 64},
|
||||
{"from": 76, "to": 65},
|
||||
{"from": 76, "to": 66},
|
||||
{"from": 76, "to": 63},
|
||||
{"from": 76, "to": 62},
|
||||
{"from": 76, "to": 48},
|
||||
{"from": 76, "to": 58}
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
size: 16
|
||||
},
|
||||
physics: {
|
||||
forceAtlas2Based: {
|
||||
gravitationalConstant: -26,
|
||||
centralGravity: 0.005,
|
||||
springLength: 230,
|
||||
springConstant: 0.18
|
||||
},
|
||||
maxVelocity: 146,
|
||||
solver: 'forceAtlas2Based',
|
||||
timestep: 0.35,
|
||||
stabilization: {iterations:300}
|
||||
}
|
||||
};
|
||||
var network = new vis.Network(container, data, options);
|
||||
|
||||
}
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
<p>
|
||||
Relations between the characters of "Les miserables".
|
||||
</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,504 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Les miserables</title>
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 900px;
|
||||
height: 900px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
#loadingBar {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
width: 902px;
|
||||
height: 902px;
|
||||
background-color:rgba(200,200,200,0.8);
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
-ms-transition: all 0.5s ease;
|
||||
-o-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
opacity:1;
|
||||
}
|
||||
#wrapper {
|
||||
position:relative;
|
||||
width:900px;
|
||||
height:900px;
|
||||
}
|
||||
|
||||
#text {
|
||||
position:absolute;
|
||||
top:8px;
|
||||
left:530px;
|
||||
width:30px;
|
||||
height:50px;
|
||||
margin:auto auto auto auto;
|
||||
font-size:22px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
|
||||
div.outerBorder {
|
||||
position:relative;
|
||||
top:400px;
|
||||
width:600px;
|
||||
height:44px;
|
||||
margin:auto auto auto auto;
|
||||
border:8px solid rgba(0,0,0,0.1);
|
||||
background: rgb(252,252,252); /* Old browsers */
|
||||
background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
|
||||
border-radius:72px;
|
||||
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
#border {
|
||||
position:absolute;
|
||||
top:10px;
|
||||
left:10px;
|
||||
width:500px;
|
||||
height:23px;
|
||||
margin:auto auto auto auto;
|
||||
box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
|
||||
border-radius:10px;
|
||||
}
|
||||
|
||||
#bar {
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
width:20px;
|
||||
height:20px;
|
||||
margin:auto auto auto auto;
|
||||
border-radius:11px;
|
||||
border:2px solid rgba(30,30,30,0.05);
|
||||
background: rgb(0, 173, 246); /* Old browsers */
|
||||
box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script type="text/javascript">
|
||||
function draw() {
|
||||
// create some nodes
|
||||
var nodes = [
|
||||
{id: 0, "label": "Myriel", "group": 1},
|
||||
{id: 1, "label": "Napoleon", "group": 1},
|
||||
{id: 2, "label": "Mlle.Baptistine", "group": 1},
|
||||
{id: 3, "label": "Mme.Magloire", "group": 1},
|
||||
{id: 4, "label": "CountessdeLo", "group": 1},
|
||||
{id: 5, "label": "Geborand", "group": 1},
|
||||
{id: 6, "label": "Champtercier", "group": 1},
|
||||
{id: 7, "label": "Cravatte", "group": 1},
|
||||
{id: 8, "label": "Count", "group": 1},
|
||||
{id: 9, "label": "OldMan", "group": 1},
|
||||
{id: 10, "label": "Labarre", "group": 2},
|
||||
{id: 11, "label": "Valjean", "group": 2},
|
||||
{id: 12, "label": "Marguerite", "group": 3},
|
||||
{id: 13, "label": "Mme.deR", "group": 2},
|
||||
{id: 14, "label": "Isabeau", "group": 2},
|
||||
{id: 15, "label": "Gervais", "group": 2},
|
||||
{id: 16, "label": "Tholomyes", "group": 3},
|
||||
{id: 17, "label": "Listolier", "group": 3},
|
||||
{id: 18, "label": "Fameuil", "group": 3},
|
||||
{id: 19, "label": "Blacheville", "group": 3},
|
||||
{id: 20, "label": "Favourite", "group": 3},
|
||||
{id: 21, "label": "Dahlia", "group": 3},
|
||||
{id: 22, "label": "Zephine", "group": 3},
|
||||
{id: 23, "label": "Fantine", "group": 3},
|
||||
{id: 24, "label": "Mme.Thenardier", "group": 4},
|
||||
{id: 25, "label": "Thenardier", "group": 4},
|
||||
{id: 26, "label": "Cosette", "group": 5},
|
||||
{id: 27, "label": "Javert", "group": 4},
|
||||
{id: 28, "label": "Fauchelevent", "group": 0},
|
||||
{id: 29, "label": "Bamatabois", "group": 2},
|
||||
{id: 30, "label": "Perpetue", "group": 3},
|
||||
{id: 31, "label": "Simplice", "group": 2},
|
||||
{id: 32, "label": "Scaufflaire", "group": 2},
|
||||
{id: 33, "label": "Woman1", "group": 2},
|
||||
{id: 34, "label": "Judge", "group": 2},
|
||||
{id: 35, "label": "Champmathieu", "group": 2},
|
||||
{id: 36, "label": "Brevet", "group": 2},
|
||||
{id: 37, "label": "Chenildieu", "group": 2},
|
||||
{id: 38, "label": "Cochepaille", "group": 2},
|
||||
{id: 39, "label": "Pontmercy", "group": 4},
|
||||
{id: 40, "label": "Boulatruelle", "group": 6},
|
||||
{id: 41, "label": "Eponine", "group": 4},
|
||||
{id: 42, "label": "Anzelma", "group": 4},
|
||||
{id: 43, "label": "Woman2", "group": 5},
|
||||
{id: 44, "label": "MotherInnocent", "group": 0},
|
||||
{id: 45, "label": "Gribier", "group": 0},
|
||||
{id: 46, "label": "Jondrette", "group": 7},
|
||||
{id: 47, "label": "Mme.Burgon", "group": 7},
|
||||
{id: 48, "label": "Gavroche", "group": 8},
|
||||
{id: 49, "label": "Gillenormand", "group": 5},
|
||||
{id: 50, "label": "Magnon", "group": 5},
|
||||
{id: 51, "label": "Mlle.Gillenormand", "group": 5},
|
||||
{id: 52, "label": "Mme.Pontmercy", "group": 5},
|
||||
{id: 53, "label": "Mlle.Vaubois", "group": 5},
|
||||
{id: 54, "label": "Lt.Gillenormand", "group": 5},
|
||||
{id: 55, "label": "Marius", "group": 8},
|
||||
{id: 56, "label": "BaronessT", "group": 5},
|
||||
{id: 57, "label": "Mabeuf", "group": 8},
|
||||
{id: 58, "label": "Enjolras", "group": 8},
|
||||
{id: 59, "label": "Combeferre", "group": 8},
|
||||
{id: 60, "label": "Prouvaire", "group": 8},
|
||||
{id: 61, "label": "Feuilly", "group": 8},
|
||||
{id: 62, "label": "Courfeyrac", "group": 8},
|
||||
{id: 63, "label": "Bahorel", "group": 8},
|
||||
{id: 64, "label": "Bossuet", "group": 8},
|
||||
{id: 65, "label": "Joly", "group": 8},
|
||||
{id: 66, "label": "Grantaire", "group": 8},
|
||||
{id: 67, "label": "MotherPlutarch", "group": 9},
|
||||
{id: 68, "label": "Gueulemer", "group": 4},
|
||||
{id: 69, "label": "Babet", "group": 4},
|
||||
{id: 70, "label": "Claquesous", "group": 4},
|
||||
{id: 71, "label": "Montparnasse", "group": 4},
|
||||
{id: 72, "label": "Toussaint", "group": 5},
|
||||
{id: 73, "label": "Child1", "group": 10},
|
||||
{id: 74, "label": "Child2", "group": 10},
|
||||
{id: 75, "label": "Brujon", "group": 4},
|
||||
{id: 76, "label": "Mme.Hucheloup", "group": 8}
|
||||
];
|
||||
|
||||
// create some edges
|
||||
var edges = [
|
||||
{"from": 1, "to": 0},
|
||||
{"from": 2, "to": 0},
|
||||
{"from": 3, "to": 0},
|
||||
{"from": 3, "to": 2},
|
||||
{"from": 4, "to": 0},
|
||||
{"from": 5, "to": 0},
|
||||
{"from": 6, "to": 0},
|
||||
{"from": 7, "to": 0},
|
||||
{"from": 8, "to": 0},
|
||||
{"from": 9, "to": 0},
|
||||
{"from": 11, "to": 10},
|
||||
{"from": 11, "to": 3},
|
||||
{"from": 11, "to": 2},
|
||||
{"from": 11, "to": 0},
|
||||
{"from": 12, "to": 11},
|
||||
{"from": 13, "to": 11},
|
||||
{"from": 14, "to": 11},
|
||||
{"from": 15, "to": 11},
|
||||
{"from": 17, "to": 16},
|
||||
{"from": 18, "to": 16},
|
||||
{"from": 18, "to": 17},
|
||||
{"from": 19, "to": 16},
|
||||
{"from": 19, "to": 17},
|
||||
{"from": 19, "to": 18},
|
||||
{"from": 20, "to": 16},
|
||||
{"from": 20, "to": 17},
|
||||
{"from": 20, "to": 18},
|
||||
{"from": 20, "to": 19},
|
||||
{"from": 21, "to": 16},
|
||||
{"from": 21, "to": 17},
|
||||
{"from": 21, "to": 18},
|
||||
{"from": 21, "to": 19},
|
||||
{"from": 21, "to": 20},
|
||||
{"from": 22, "to": 16},
|
||||
{"from": 22, "to": 17},
|
||||
{"from": 22, "to": 18},
|
||||
{"from": 22, "to": 19},
|
||||
{"from": 22, "to": 20},
|
||||
{"from": 22, "to": 21},
|
||||
{"from": 23, "to": 16},
|
||||
{"from": 23, "to": 17},
|
||||
{"from": 23, "to": 18},
|
||||
{"from": 23, "to": 19},
|
||||
{"from": 23, "to": 20},
|
||||
{"from": 23, "to": 21},
|
||||
{"from": 23, "to": 22},
|
||||
{"from": 23, "to": 12},
|
||||
{"from": 23, "to": 11},
|
||||
{"from": 24, "to": 23},
|
||||
{"from": 24, "to": 11},
|
||||
{"from": 25, "to": 24},
|
||||
{"from": 25, "to": 23},
|
||||
{"from": 25, "to": 11},
|
||||
{"from": 26, "to": 24},
|
||||
{"from": 26, "to": 11},
|
||||
{"from": 26, "to": 16},
|
||||
{"from": 26, "to": 25},
|
||||
{"from": 27, "to": 11},
|
||||
{"from": 27, "to": 23},
|
||||
{"from": 27, "to": 25},
|
||||
{"from": 27, "to": 24},
|
||||
{"from": 27, "to": 26},
|
||||
{"from": 28, "to": 11},
|
||||
{"from": 28, "to": 27},
|
||||
{"from": 29, "to": 23},
|
||||
{"from": 29, "to": 27},
|
||||
{"from": 29, "to": 11},
|
||||
{"from": 30, "to": 23},
|
||||
{"from": 31, "to": 30},
|
||||
{"from": 31, "to": 11},
|
||||
{"from": 31, "to": 23},
|
||||
{"from": 31, "to": 27},
|
||||
{"from": 32, "to": 11},
|
||||
{"from": 33, "to": 11},
|
||||
{"from": 33, "to": 27},
|
||||
{"from": 34, "to": 11},
|
||||
{"from": 34, "to": 29},
|
||||
{"from": 35, "to": 11},
|
||||
{"from": 35, "to": 34},
|
||||
{"from": 35, "to": 29},
|
||||
{"from": 36, "to": 34},
|
||||
{"from": 36, "to": 35},
|
||||
{"from": 36, "to": 11},
|
||||
{"from": 36, "to": 29},
|
||||
{"from": 37, "to": 34},
|
||||
{"from": 37, "to": 35},
|
||||
{"from": 37, "to": 36},
|
||||
{"from": 37, "to": 11},
|
||||
{"from": 37, "to": 29},
|
||||
{"from": 38, "to": 34},
|
||||
{"from": 38, "to": 35},
|
||||
{"from": 38, "to": 36},
|
||||
{"from": 38, "to": 37},
|
||||
{"from": 38, "to": 11},
|
||||
{"from": 38, "to": 29},
|
||||
{"from": 39, "to": 25},
|
||||
{"from": 40, "to": 25},
|
||||
{"from": 41, "to": 24},
|
||||
{"from": 41, "to": 25},
|
||||
{"from": 42, "to": 41},
|
||||
{"from": 42, "to": 25},
|
||||
{"from": 42, "to": 24},
|
||||
{"from": 43, "to": 11},
|
||||
{"from": 43, "to": 26},
|
||||
{"from": 43, "to": 27},
|
||||
{"from": 44, "to": 28},
|
||||
{"from": 44, "to": 11},
|
||||
{"from": 45, "to": 28},
|
||||
{"from": 47, "to": 46},
|
||||
{"from": 48, "to": 47},
|
||||
{"from": 48, "to": 25},
|
||||
{"from": 48, "to": 27},
|
||||
{"from": 48, "to": 11},
|
||||
{"from": 49, "to": 26},
|
||||
{"from": 49, "to": 11},
|
||||
{"from": 50, "to": 49},
|
||||
{"from": 50, "to": 24},
|
||||
{"from": 51, "to": 49},
|
||||
{"from": 51, "to": 26},
|
||||
{"from": 51, "to": 11},
|
||||
{"from": 52, "to": 51},
|
||||
{"from": 52, "to": 39},
|
||||
{"from": 53, "to": 51},
|
||||
{"from": 54, "to": 51},
|
||||
{"from": 54, "to": 49},
|
||||
{"from": 54, "to": 26},
|
||||
{"from": 55, "to": 51},
|
||||
{"from": 55, "to": 49},
|
||||
{"from": 55, "to": 39},
|
||||
{"from": 55, "to": 54},
|
||||
{"from": 55, "to": 26},
|
||||
{"from": 55, "to": 11},
|
||||
{"from": 55, "to": 16},
|
||||
{"from": 55, "to": 25},
|
||||
{"from": 55, "to": 41},
|
||||
{"from": 55, "to": 48},
|
||||
{"from": 56, "to": 49},
|
||||
{"from": 56, "to": 55},
|
||||
{"from": 57, "to": 55},
|
||||
{"from": 57, "to": 41},
|
||||
{"from": 57, "to": 48},
|
||||
{"from": 58, "to": 55},
|
||||
{"from": 58, "to": 48},
|
||||
{"from": 58, "to": 27},
|
||||
{"from": 58, "to": 57},
|
||||
{"from": 58, "to": 11},
|
||||
{"from": 59, "to": 58},
|
||||
{"from": 59, "to": 55},
|
||||
{"from": 59, "to": 48},
|
||||
{"from": 59, "to": 57},
|
||||
{"from": 60, "to": 48},
|
||||
{"from": 60, "to": 58},
|
||||
{"from": 60, "to": 59},
|
||||
{"from": 61, "to": 48},
|
||||
{"from": 61, "to": 58},
|
||||
{"from": 61, "to": 60},
|
||||
{"from": 61, "to": 59},
|
||||
{"from": 61, "to": 57},
|
||||
{"from": 61, "to": 55},
|
||||
{"from": 62, "to": 55},
|
||||
{"from": 62, "to": 58},
|
||||
{"from": 62, "to": 59},
|
||||
{"from": 62, "to": 48},
|
||||
{"from": 62, "to": 57},
|
||||
{"from": 62, "to": 41},
|
||||
{"from": 62, "to": 61},
|
||||
{"from": 62, "to": 60},
|
||||
{"from": 63, "to": 59},
|
||||
{"from": 63, "to": 48},
|
||||
{"from": 63, "to": 62},
|
||||
{"from": 63, "to": 57},
|
||||
{"from": 63, "to": 58},
|
||||
{"from": 63, "to": 61},
|
||||
{"from": 63, "to": 60},
|
||||
{"from": 63, "to": 55},
|
||||
{"from": 64, "to": 55},
|
||||
{"from": 64, "to": 62},
|
||||
{"from": 64, "to": 48},
|
||||
{"from": 64, "to": 63},
|
||||
{"from": 64, "to": 58},
|
||||
{"from": 64, "to": 61},
|
||||
{"from": 64, "to": 60},
|
||||
{"from": 64, "to": 59},
|
||||
{"from": 64, "to": 57},
|
||||
{"from": 64, "to": 11},
|
||||
{"from": 65, "to": 63},
|
||||
{"from": 65, "to": 64},
|
||||
{"from": 65, "to": 48},
|
||||
{"from": 65, "to": 62},
|
||||
{"from": 65, "to": 58},
|
||||
{"from": 65, "to": 61},
|
||||
{"from": 65, "to": 60},
|
||||
{"from": 65, "to": 59},
|
||||
{"from": 65, "to": 57},
|
||||
{"from": 65, "to": 55},
|
||||
{"from": 66, "to": 64},
|
||||
{"from": 66, "to": 58},
|
||||
{"from": 66, "to": 59},
|
||||
{"from": 66, "to": 62},
|
||||
{"from": 66, "to": 65},
|
||||
{"from": 66, "to": 48},
|
||||
{"from": 66, "to": 63},
|
||||
{"from": 66, "to": 61},
|
||||
{"from": 66, "to": 60},
|
||||
{"from": 67, "to": 57},
|
||||
{"from": 68, "to": 25},
|
||||
{"from": 68, "to": 11},
|
||||
{"from": 68, "to": 24},
|
||||
{"from": 68, "to": 27},
|
||||
{"from": 68, "to": 48},
|
||||
{"from": 68, "to": 41},
|
||||
{"from": 69, "to": 25},
|
||||
{"from": 69, "to": 68},
|
||||
{"from": 69, "to": 11},
|
||||
{"from": 69, "to": 24},
|
||||
{"from": 69, "to": 27},
|
||||
{"from": 69, "to": 48},
|
||||
{"from": 69, "to": 41},
|
||||
{"from": 70, "to": 25},
|
||||
{"from": 70, "to": 69},
|
||||
{"from": 70, "to": 68},
|
||||
{"from": 70, "to": 11},
|
||||
{"from": 70, "to": 24},
|
||||
{"from": 70, "to": 27},
|
||||
{"from": 70, "to": 41},
|
||||
{"from": 70, "to": 58},
|
||||
{"from": 71, "to": 27},
|
||||
{"from": 71, "to": 69},
|
||||
{"from": 71, "to": 68},
|
||||
{"from": 71, "to": 70},
|
||||
{"from": 71, "to": 11},
|
||||
{"from": 71, "to": 48},
|
||||
{"from": 71, "to": 41},
|
||||
{"from": 71, "to": 25},
|
||||
{"from": 72, "to": 26},
|
||||
{"from": 72, "to": 27},
|
||||
{"from": 72, "to": 11},
|
||||
{"from": 73, "to": 48},
|
||||
{"from": 74, "to": 48},
|
||||
{"from": 74, "to": 73},
|
||||
{"from": 75, "to": 69},
|
||||
{"from": 75, "to": 68},
|
||||
{"from": 75, "to": 25},
|
||||
{"from": 75, "to": 48},
|
||||
{"from": 75, "to": 41},
|
||||
{"from": 75, "to": 70},
|
||||
{"from": 75, "to": 71},
|
||||
{"from": 76, "to": 64},
|
||||
{"from": 76, "to": 65},
|
||||
{"from": 76, "to": 66},
|
||||
{"from": 76, "to": 63},
|
||||
{"from": 76, "to": 62},
|
||||
{"from": 76, "to": 48},
|
||||
{"from": 76, "to": 58}
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
size: 16
|
||||
},
|
||||
layout:{
|
||||
randomSeed:34
|
||||
},
|
||||
physics: {
|
||||
forceAtlas2Based: {
|
||||
gravitationalConstant: -26,
|
||||
centralGravity: 0.005,
|
||||
springLength: 230,
|
||||
springConstant: 0.18
|
||||
},
|
||||
maxVelocity: 146,
|
||||
solver: 'forceAtlas2Based',
|
||||
timestep: 0.35,
|
||||
stabilization: {
|
||||
enabled:true,
|
||||
iterations:2000,
|
||||
updateInterval:25
|
||||
}
|
||||
}
|
||||
};
|
||||
var network = new vis.Network(container, data, options);
|
||||
|
||||
network.on("stabilizationProgress", function(params) {
|
||||
var maxWidth = 496;
|
||||
var minWidth = 20;
|
||||
var widthFactor = params.iterations/params.total;
|
||||
var width = Math.max(minWidth,maxWidth * widthFactor);
|
||||
|
||||
document.getElementById('bar').style.width = width + 'px';
|
||||
document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%';
|
||||
});
|
||||
network.once("stabilizationIterationsDone", function() {
|
||||
document.getElementById('text').innerHTML = '100%';
|
||||
document.getElementById('bar').style.width = '496px';
|
||||
document.getElementById('loadingBar').style.opacity = 0;
|
||||
// really clean the dom element
|
||||
setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
|
||||
});
|
||||
|
||||
}
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
<p>
|
||||
With the new stabilization events you can implement your own custom loading bar for all those long loading times!
|
||||
</p>
|
||||
|
||||
<div id="wrapper">
|
||||
<div id="mynetwork"></div>
|
||||
<div id="loadingBar">
|
||||
<div class="outerBorder">
|
||||
<div id="text">0%</div>
|
||||
<div id="border">
|
||||
<div id="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,162 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
|
||||
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF8">
|
||||
<title>Network | Static smooth curves - World Cup Network</title>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../../dist/vis.css">
|
||||
|
||||
<script src="../datasources/WorldCup2014.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h2>Dynamic Data - Neighbourhood Highlight</h2>
|
||||
<div style="width:800px; font-size:14px;">
|
||||
This example shows the power of the DataSet. Once a node is clicked, all nodes are greyed out except for the first and second order connected nodes.
|
||||
In this example we show how you can determine the order of connection per node as well as applying individual styling to the nodes based on whether or not
|
||||
they are connected to the selected node. The code doing the highlighting only takes about 1ms, the rest of the time is the redrawing of the network (9200 edges..).
|
||||
<br /><br />
|
||||
</div>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var network;
|
||||
var allNodes;
|
||||
var highlightActive = false;
|
||||
|
||||
var nodesDataset = new vis.DataSet(nodes); // these come from WorldCup2014.js
|
||||
var edgesDataset = new vis.DataSet(edges); // these come from WorldCup2014.js
|
||||
|
||||
function redrawAll() {
|
||||
var container = document.getElementById('mynetwork');
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
scaling: {
|
||||
min: 10,
|
||||
max: 30,
|
||||
label: {
|
||||
min: 8,
|
||||
max: 30,
|
||||
drawThreshold: 12,
|
||||
maxVisible: 20
|
||||
}
|
||||
},
|
||||
font: {
|
||||
size: 12,
|
||||
face: 'Tahoma'
|
||||
}
|
||||
},
|
||||
edges: {
|
||||
width: 0.15,
|
||||
color: {inherit: 'from'},
|
||||
smooth: {
|
||||
type: 'continuous'
|
||||
}
|
||||
},
|
||||
physics: false,
|
||||
interaction: {
|
||||
tooltipDelay: 200,
|
||||
hideEdgesOnDrag: true
|
||||
}
|
||||
};
|
||||
var data = {nodes:nodesDataset, edges:edgesDataset} // Note: data is coming from ./datasources/WorldCup2014.js
|
||||
|
||||
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
// get a JSON object
|
||||
allNodes = nodesDataset.get({returnType:"Object"});
|
||||
|
||||
network.on("click",neighbourhoodHighlight);
|
||||
}
|
||||
|
||||
function neighbourhoodHighlight(params) {
|
||||
// if something is selected:
|
||||
if (params.nodes.length > 0) {
|
||||
highlightActive = true;
|
||||
var i,j;
|
||||
var selectedNode = params.nodes[0];
|
||||
var degrees = 2;
|
||||
|
||||
// mark all nodes as hard to read.
|
||||
for (var nodeId in allNodes) {
|
||||
allNodes[nodeId].color = 'rgba(200,200,200,0.5)';
|
||||
if (allNodes[nodeId].hiddenLabel === undefined) {
|
||||
allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
|
||||
allNodes[nodeId].label = undefined;
|
||||
}
|
||||
}
|
||||
var connectedNodes = network.getConnectedNodes(selectedNode);
|
||||
var allConnectedNodes = [];
|
||||
|
||||
// get the second degree nodes
|
||||
for (i = 1; i < degrees; i++) {
|
||||
for (j = 0; j < connectedNodes.length; j++) {
|
||||
allConnectedNodes = allConnectedNodes.concat(network.getConnectedNodes(connectedNodes[j]));
|
||||
}
|
||||
}
|
||||
|
||||
// all second degree nodes get a different color and their label back
|
||||
for (i = 0; i < allConnectedNodes.length; i++) {
|
||||
allNodes[allConnectedNodes[i]].color = 'rgba(150,150,150,0.75)';
|
||||
if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
|
||||
allNodes[allConnectedNodes[i]].label = allNodes[allConnectedNodes[i]].hiddenLabel;
|
||||
allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// all first degree nodes get their own color and their label back
|
||||
for (i = 0; i < connectedNodes.length; i++) {
|
||||
allNodes[connectedNodes[i]].color = undefined;
|
||||
if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
|
||||
allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].hiddenLabel;
|
||||
allNodes[connectedNodes[i]].hiddenLabel = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// the main node gets its own color and its label back.
|
||||
allNodes[selectedNode].color = undefined;
|
||||
if (allNodes[selectedNode].hiddenLabel !== undefined) {
|
||||
allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
|
||||
allNodes[selectedNode].hiddenLabel = undefined;
|
||||
}
|
||||
}
|
||||
else if (highlightActive === true) {
|
||||
// reset all nodes
|
||||
for (var nodeId in allNodes) {
|
||||
allNodes[nodeId].color = undefined;
|
||||
if (allNodes[nodeId].hiddenLabel !== undefined) {
|
||||
allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
|
||||
allNodes[nodeId].hiddenLabel = undefined;
|
||||
}
|
||||
}
|
||||
highlightActive = false
|
||||
}
|
||||
|
||||
// transform the object into an array
|
||||
var updateArray = [];
|
||||
for (nodeId in allNodes) {
|
||||
if (allNodes.hasOwnProperty(nodeId)) {
|
||||
updateArray.push(allNodes[nodeId]);
|
||||
}
|
||||
}
|
||||
nodesDataset.update(updateArray);
|
||||
}
|
||||
|
||||
redrawAll()
|
||||
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
+19
-13
@@ -18,8 +18,8 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
@@ -98,11 +98,11 @@
|
||||
var x = - mynetwork.clientWidth / 2 + 50;
|
||||
var y = - mynetwork.clientHeight / 2 + 50;
|
||||
var step = 70;
|
||||
nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1, mass:0});
|
||||
nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1, mass:0});
|
||||
nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1, mass:0});
|
||||
nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1, mass:0});
|
||||
nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1, mass:0});
|
||||
nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1, fixed: true, physics:false});
|
||||
nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1, fixed: true, physics:false});
|
||||
nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1, fixed: true, physics:false});
|
||||
nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1, fixed: true, physics:false});
|
||||
nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1, fixed: true, physics:false});
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
@@ -111,14 +111,19 @@
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
stabilize: false, // stabilize positions before displaying
|
||||
nodes: {
|
||||
radiusMin: 16,
|
||||
radiusMax: 32,
|
||||
fontColor: BLACK
|
||||
scaling: {
|
||||
min: 16,
|
||||
max: 32
|
||||
}
|
||||
},
|
||||
edges: {
|
||||
color: GRAY
|
||||
color: GRAY,
|
||||
smooth: false
|
||||
},
|
||||
physics:{
|
||||
barnesHut:{gravitationalConstant:-30000},
|
||||
stabilization: {iterations:2500}
|
||||
},
|
||||
groups: {
|
||||
'switch': {
|
||||
@@ -146,11 +151,12 @@
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
|
||||
<div id="mynetwork"><div class="network-frame" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><canvas style="position: relative; width: 100%; height: 100%;"></canvas></div></div>
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
<!doctype html>
|
||||
<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF8">
|
||||
<title>Network | Static smooth curves - World Cup Network</title>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../../dist/vis.css">
|
||||
|
||||
<script src="../datasources/WorldCup2014.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h2>Performance - World Cup Network</h2>
|
||||
|
||||
<div style="width:700px; font-size:14px;">
|
||||
This example shows the performance of vis with a larger network. The edges in
|
||||
particular (~9200) are very computationally intensive
|
||||
to draw. Drag and hold the graph to see the performance difference if the
|
||||
edges are hidden.
|
||||
<br/><br/>
|
||||
We use the following physics configuration: <br/>
|
||||
<code>{barnesHut: {gravitationalConstant: -80000, springConstant: 0.001,
|
||||
springLength: 200}}</code>
|
||||
<br/><br/>
|
||||
</div>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var network;
|
||||
|
||||
|
||||
function redrawAll() {
|
||||
// remove positoins
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
delete nodes[i].x;
|
||||
delete nodes[i].y;
|
||||
}
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
scaling: {
|
||||
min: 10,
|
||||
max: 30
|
||||
},
|
||||
font: {
|
||||
size: 12,
|
||||
face: 'Tahoma'
|
||||
}
|
||||
},
|
||||
edges: {
|
||||
width: 0.15,
|
||||
color: {inherit: 'from'},
|
||||
smooth: {
|
||||
type: 'continuous'
|
||||
}
|
||||
},
|
||||
physics: {
|
||||
stabilization: false,
|
||||
barnesHut: {
|
||||
gravitationalConstant: -80000,
|
||||
springConstant: 0.001,
|
||||
springLength: 200
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
tooltipDelay: 200,
|
||||
hideEdgesOnDrag: true
|
||||
}
|
||||
};
|
||||
|
||||
// Note: data is coming from ./datasources/WorldCup2014.js
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
|
||||
redrawAll()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,70 @@
|
||||
/**
|
||||
* Created by Alex on 5/20/2015.
|
||||
*/
|
||||
|
||||
function loadJSON(path, success, error) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status === 200) {
|
||||
success(JSON.parse(xhr.responseText));
|
||||
}
|
||||
else {
|
||||
error(xhr);
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.open('GET', path, true);
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
|
||||
function getScaleFreeNetwork(nodeCount) {
|
||||
var nodes = [];
|
||||
var edges = [];
|
||||
var connectionCount = [];
|
||||
|
||||
// randomly create some nodes and edges
|
||||
for (var i = 0; i < nodeCount; i++) {
|
||||
nodes.push({
|
||||
id: i,
|
||||
label: String(i)
|
||||
});
|
||||
|
||||
connectionCount[i] = 0;
|
||||
|
||||
// create edges in a scale-free-network way
|
||||
if (i == 1) {
|
||||
var from = i;
|
||||
var to = 0;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
else if (i > 1) {
|
||||
var conn = edges.length * 2;
|
||||
var rand = Math.floor(Math.random() * conn);
|
||||
var cum = 0;
|
||||
var j = 0;
|
||||
while (j < connectionCount.length && cum < rand) {
|
||||
cum += connectionCount[j];
|
||||
j++;
|
||||
}
|
||||
|
||||
|
||||
var from = i;
|
||||
var to = j;
|
||||
edges.push({
|
||||
from: from,
|
||||
to: to
|
||||
});
|
||||
connectionCount[from]++;
|
||||
connectionCount[to]++;
|
||||
}
|
||||
}
|
||||
|
||||
return {nodes:nodes, edges:edges};
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Graphviz Gallery</title>
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
p {
|
||||
width: 600px;
|
||||
}
|
||||
html, body, select {
|
||||
font: 11pt arial;
|
||||
}
|
||||
#mygraph {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
if (location.href.substr(0, 5) == 'file:') {
|
||||
document.write(
|
||||
'<p style="color: red;">' +
|
||||
'Error: Cannot fetch the example data because of security ' +
|
||||
'restrictions in JavaScript. Run the example from a server ' +
|
||||
'instead of as a local file to resolve this problem. ' +
|
||||
'Alternatively, you can load DOT graphs in ' +
|
||||
'the <a href="../15_dot_language_playground.html" ' +
|
||||
'style="color:red;">playground</a>.' +
|
||||
'</p>');
|
||||
}
|
||||
</script>
|
||||
|
||||
<p>
|
||||
The following examples are unmodified copies from the
|
||||
<a href="http://www.graphviz.org/Gallery.php" target="_blank">Graphviz Gallery</a>.
|
||||
</p>
|
||||
<p>
|
||||
Note that some style attributes of Graphviz are not supported by vis.js,
|
||||
and that vis.js offers options not supported by Graphviz (which could make
|
||||
some examples look much nicer).
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="url">Select an example:</label>
|
||||
<select id="url" onchange="loadData()">
|
||||
<option value="data/fsm.gv.txt">fsm</option>
|
||||
<option value="data/hello.gv.txt">hello</option>
|
||||
<option value="data/process.gv.txt">process</option>
|
||||
<option value="data/siblings.gv.txt">siblings</option>
|
||||
<option value="data/softmaint.gv.txt">softmaint</option>
|
||||
<option value="data/traffic_lights.gv.txt">traffic_lights</option>
|
||||
<option value="data/transparency.gv.txt">transparency</option>
|
||||
<option value="data/twopi2.gv.txt">twopi2</option>
|
||||
<option value="data/unix.gv.txt">unix</option>
|
||||
<option value="data/world.gv.txt">world</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<div id="mygraph"></div>
|
||||
<script type="text/javascript">
|
||||
var container = document.getElementById('mygraph');
|
||||
var url = document.getElementById('url');
|
||||
var network = new vis.Network(container,{},{physics:{barnesHut:{springLength:75,springConstant:0.015}}});
|
||||
|
||||
function loadData () {
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: url.value
|
||||
}).done(function(data) {
|
||||
network.setOptions({
|
||||
stabilize: false
|
||||
});
|
||||
network.setData( {
|
||||
dot: data
|
||||
});
|
||||
});
|
||||
}
|
||||
loadData();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,57 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>vis.js | Network examples</title>
|
||||
|
||||
<link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
|
||||
<h1>vis.js Network examples</h1>
|
||||
|
||||
<p><a href="01_basic_usage.html">01_basic_usage.html</a></p>
|
||||
<p><a href="02_random_nodes.html">02_random_nodes.html</a></p>
|
||||
<p><a href="03_images.html">03_images.html</a></p>
|
||||
<p><a href="04_shapes.html">04_shapes.html</a></p>
|
||||
<p><a href="05_social_network.html">05_social_network.html</a></p>
|
||||
<p><a href="06_groups.html">06_groups.html</a></p>
|
||||
<p><a href="07_selections.html">07_selections.html</a></p>
|
||||
<p><a href="08_mobile_friendly.html">08_mobile_friendly.html</a></p>
|
||||
<p><a href="09_sizing.html">09_sizing.html</a></p>
|
||||
<p><a href="10_multiline_text.html">10_multiline_text.html</a></p>
|
||||
<p><a href="11_custom_style.html">11_custom_style.html</a></p>
|
||||
<p><a href="12_scalable_images.html">12_scalable_images.html</a></p>
|
||||
<p><a href="13_dashed_lines.html">13_dashed_lines.html</a></p>
|
||||
<p><a href="14_dot_language.html">14_dot_language.html</a></p>
|
||||
<p><a href="15_dot_language_playground.html">15_dot_language_playground.html</a></p>
|
||||
<p><a href="16_dynamic_data.html">16_dynamic_data.html</a></p>
|
||||
<p><a href="17_network_info.html">17_network_info.html</a></p>
|
||||
<p><a href="18_fully_random_nodes_clustering.html">18_fully_random_nodes_clustering.html</a></p>
|
||||
<p><a href="19_scale_free_graph_clustering.html">19_scale_free_graph_clustering.html</a></p>
|
||||
<p><a href="20_navigation.html">20_navigation.html</a></p>
|
||||
<p><a href="21_data_manipulation.html">21_data_manipulation.html</a></p>
|
||||
<p><a href="22_les_miserables.html">22_les_miserables.html</a></p>
|
||||
<p><a href="23_hierarchical_layout.html">23_hierarchical_layout.html</a></p>
|
||||
<p><a href="24_hierarchical_layout_userdefined.html">24_hierarchical_layout_userdefined.html</a></p>
|
||||
<p><a href="25_physics_configuration.html">25_physics_configuration.html</a></p>
|
||||
<p><a href="26_staticSmoothCurves.html">26_staticSmoothCurves.html</a></p>
|
||||
<p><a href="27_world_cup_network.html">27_world_cup_network.html</a></p>
|
||||
<p><a href="28_world_cup_network_performance.html">28_world_cup_network_performance.html</a></p>
|
||||
<p><a href="29_neighbourhood_highlight.html">29_neighbourhood_highlight.html</a></p>
|
||||
<p><a href="30_importing_from_gephi.html">30_importing_from_gephi.html</a></p>
|
||||
<p><a href="31_localization.html">31_localization.html</a></p>
|
||||
<p><a href="32_hierarchicaLayoutMethods.html">32_hierarchicaLayoutMethods.html</a></p>
|
||||
<p><a href="33_animation.html">33_animation.html</a></p>
|
||||
<p><a href="34_circular_images.html">34_circular_images.html</a></p>
|
||||
<p><a href="35_label_stroke.html">35_label_stroke.html</a></p>
|
||||
<p><a href="36_HTML_in_Nodes.html">36_HTML_in_Nodes.html</a></p>
|
||||
<p><a href="37_label_alignment.html">37_label_alignment.html</a></p>
|
||||
<p><a href="38_node_as_icon.html">38_node_as_icon.html</a></p>
|
||||
<p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,57 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Label alignment</title>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
p {
|
||||
max-width:600px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Labels of edges can be aligned to edges in various ways. <br>Label alignment for nodes (top, bottom, left, right, inside) is planned but not in vis yet.</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// create an array with nodes
|
||||
var nodes = [
|
||||
{id: 1, label: 'Node 1'},
|
||||
{id: 2, label: 'Node 2'},
|
||||
{id: 3, label: 'Node 3'},
|
||||
{id: 4, label: 'Node 4'},
|
||||
{id: 5, label: 'Node 5'}
|
||||
];
|
||||
|
||||
// create an array with edges
|
||||
var edges = [
|
||||
{from: 1, to: 2, label: 'middle', font: {align: 'middle'}},
|
||||
{from: 1, to: 3, label: 'top', font: {align: 'top'}},
|
||||
{from: 2, to: 4, label: 'horizontal', font: {align: 'horizontal'}},
|
||||
{from: 2, to: 5, label: 'bottom', font: {align: 'bottom'}}
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {};
|
||||
var network = new vis.Network(container, data, options);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,57 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Label alignment</title>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
p {
|
||||
max-width:600px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Labels can have any color background.</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// create an array with nodes
|
||||
var nodes = [
|
||||
{id: 1, label: 'Node 1', font: {background: 'red'}},
|
||||
{id: 2, label: 'Node 2', font: {background: 'white'}},
|
||||
{id: 3, label: 'Node 3', font: {background: 'cyan'}},
|
||||
{id: 4, label: 'Node 4', font: {background: 'lime'}},
|
||||
{id: 5, label: 'Node 5', font: {background: 'pink'}}
|
||||
];
|
||||
|
||||
// create an array with edges
|
||||
var edges = [
|
||||
{from: 1, to: 2, label: 'label1', font: {background: '#ff0000'}},
|
||||
{from: 1, to: 3, label: 'label2', font: {background: 'yellow'}},
|
||||
{from: 2, to: 4, label: 'label3', font: {background: 'lime'}},
|
||||
{from: 2, to: 5, label: 'label3', font: {background: 'pink'}}
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {nodes:{font:{strokeWidth:0}}, edges:{font:{strokeWidth:0}}};
|
||||
var network = new vis.Network(container, data, options);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Label stroke</title>
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
background:#d1d1d1;
|
||||
}
|
||||
p {
|
||||
max-width:600px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>The style of the edges can be fully customized.</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// create an array with nodes
|
||||
var nodes = [
|
||||
{id: 1, label: 'Node 1', font: '12px arial red'},
|
||||
{id: 2, label: 'Node 2', font: {size:12, color:'lime', face:'arial'}},
|
||||
{id: 3, label: 'Node 3', font: '18px verdana blue'},
|
||||
{id: 4, label: 'Node 4', font: {size:12, color:'red', face:'sans', background:'white'}},
|
||||
{id: 5, label: 'Node 5', font: {size:15, color:'red', face:'courier', strokeWidth:3, strokeColor:'#ffffff'}}
|
||||
];
|
||||
|
||||
// create an array with edges
|
||||
var edges = [
|
||||
{from: 1, to: 2},
|
||||
{from: 1, to: 3},
|
||||
{from: 2, to: 4},
|
||||
{from: 2, to: 5}
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes : {
|
||||
shape: 'dot',
|
||||
size: 10
|
||||
}
|
||||
};
|
||||
var network = new vis.Network(container, data, options);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,28 +2,32 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Label stroke</title>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
background: #d1d1d1;
|
||||
background:#d1d1d1;
|
||||
}
|
||||
p {
|
||||
max-width:600px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>The stroke of labels is fully can have a width and color. Edgelabels by default have a white stroke for clarity.</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// create an array with nodes
|
||||
var nodes = [
|
||||
{id: 1, label: 'Node 1', fontStrokeWidth : 5, fontStrokeColor: 'white'},
|
||||
{id: 1, label: 'Node 1', font: {strokeWidth: 3, strokeColor: 'white'}},
|
||||
{id: 2, label: 'Node 2'},
|
||||
{id: 3, label: 'Node 3'},
|
||||
{id: 4, label: 'Node 4'},
|
||||
@@ -32,7 +36,7 @@
|
||||
|
||||
// create an array with edges
|
||||
var edges = [
|
||||
{from: 1, to: 2, label: 'edgeLabel', fontStrokeWidth : 2, fontStrokeColor : '#00ff00'},
|
||||
{from: 1, to: 2, label: 'edgeLabel', font: {strokeWidth: 2, strokeColor : '#00ff00'}},
|
||||
{from: 1, to: 3, label: 'edgeLabel'},
|
||||
{from: 2, to: 4},
|
||||
{from: 2, to: 5}
|
||||
@@ -46,14 +50,8 @@
|
||||
};
|
||||
var options = {
|
||||
nodes : {
|
||||
shape : 'dot',
|
||||
fontStrokeWidth : 1,
|
||||
fontStrokeColor : '#d1d1d1'
|
||||
},
|
||||
edges : {
|
||||
fontStrokeWidth : 1,
|
||||
fontStrokeColor : '#d1d1d1',
|
||||
fontFill : 'none'
|
||||
shape: 'dot',
|
||||
size: 10
|
||||
}
|
||||
};
|
||||
var network = new vis.Network(container, data, options);
|
||||
+9
-8
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Multiline text</title>
|
||||
@@ -11,14 +11,14 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
function draw() {
|
||||
// create some nodes
|
||||
var nodes = [
|
||||
{id: 1, label: 'Node in\nthe center', shape: 'text'},
|
||||
{id: 1, label: 'Node in\nthe center', shape: 'text', font:{strokeWidth:4}},
|
||||
{id: 2, label: 'Node\nwith\nmultiple\nlines', shape: 'circle'},
|
||||
{id: 3, label: 'This is a lot of text\nbut luckily we can spread\nover multiple lines', shape: 'database'},
|
||||
{id: 4, label: 'This is text\non multiple lines', shape: 'box'},
|
||||
@@ -27,10 +27,10 @@
|
||||
|
||||
// create some edges
|
||||
var edges = [
|
||||
{from: 1, to: 2, style: 'line', color: 'red', width: 3, length: 200}, // individual length definition is possible
|
||||
{from: 1, to: 3, style: 'dash-line', width: 1, length: 200},
|
||||
{from: 1, to: 4, style: 'line', width: 1, length: 200, label:'I\'m an edge!'},
|
||||
{from: 1, to: 5, style: 'arrow', width: 3, length: 200, label:'arrows\nare cool'}
|
||||
{from: 1, to: 2, color: 'red', width: 3, length: 200}, // individual length definition is possible
|
||||
{from: 1, to: 3, dashes:true, width: 1, length: 200},
|
||||
{from: 1, to: 4, width: 1, length: 200, label:'I\'m an edge!'},
|
||||
{from: 1, to: 5, arrows:'to', width: 3, length: 200, label:'arrows\nare cool'}
|
||||
];
|
||||
|
||||
// create a network
|
||||
@@ -43,6 +43,7 @@
|
||||
var network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
@@ -0,0 +1,114 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Hierarchical layout</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt sans;
|
||||
}
|
||||
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../exampleUtil.js"></script>
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function destroy() {
|
||||
if (network !== null) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
destroy();
|
||||
// randomly create some nodes and edges
|
||||
var nodeCount = document.getElementById('nodeCount').value;
|
||||
var data = getScaleFreeNetwork(nodeCount)
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var directionInput = document.getElementById("direction").value;
|
||||
var options = {
|
||||
layout: {
|
||||
hierarchical: {
|
||||
direction: directionInput
|
||||
}
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
// add event listeners
|
||||
network.on('select', function (params) {
|
||||
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
<script src="../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<h2>Hierarchical Layout - Scale-Free-Network</h2>
|
||||
|
||||
<div style="width:700px; font-size:14px; text-align: justify;">
|
||||
This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
|
||||
In this example, hierarchical layout has been enabled and the vertical levels are determined automatically.
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
<form onsubmit="draw(); return false;">
|
||||
<label for="nodeCount">Number of nodes:</label>
|
||||
<input id="nodeCount" type="text" value="25" style="width: 50px;">
|
||||
<input type="submit" value="Go">
|
||||
</form>
|
||||
<p>
|
||||
<input type="button" id="btn-UD" value="Up-Down">
|
||||
<input type="button" id="btn-DU" value="Down-Up">
|
||||
<input type="button" id="btn-LR" value="Left-Right">
|
||||
<input type="button" id="btn-RL" value="Right-Left">
|
||||
<input type="hidden" id='direction' value="UD">
|
||||
</p>
|
||||
|
||||
<script language="javascript">
|
||||
var directionInput = document.getElementById("direction");
|
||||
var btnUD = document.getElementById("btn-UD");
|
||||
btnUD.onclick = function () {
|
||||
directionInput.value = "UD";
|
||||
draw();
|
||||
}
|
||||
var btnDU = document.getElementById("btn-DU");
|
||||
btnDU.onclick = function () {
|
||||
directionInput.value = "DU";
|
||||
draw();
|
||||
};
|
||||
var btnLR = document.getElementById("btn-LR");
|
||||
btnLR.onclick = function () {
|
||||
directionInput.value = "LR";
|
||||
draw();
|
||||
};
|
||||
var btnRL = document.getElementById("btn-RL");
|
||||
btnRL.onclick = function () {
|
||||
directionInput.value = "RL";
|
||||
draw();
|
||||
};
|
||||
</script>
|
||||
<br>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<p id="selection"></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Hierarchical layout difference</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 800px;
|
||||
height: 500px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var network = null;
|
||||
var layoutMethod = "hubsize";
|
||||
|
||||
function destroy() {
|
||||
if (network !== null) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
destroy();
|
||||
|
||||
var nodes = [];
|
||||
var edges = [];
|
||||
// randomly create some nodes and edges
|
||||
for (var i = 0; i < 19; i++) {
|
||||
nodes.push({id: i, label: String(i)});
|
||||
}
|
||||
edges.push({from: 0, to: 1});
|
||||
edges.push({from: 0, to: 6});
|
||||
edges.push({from: 0, to: 13});
|
||||
edges.push({from: 0, to: 11});
|
||||
edges.push({from: 1, to: 2});
|
||||
edges.push({from: 2, to: 3});
|
||||
edges.push({from: 2, to: 4});
|
||||
edges.push({from: 3, to: 5});
|
||||
edges.push({from: 1, to: 10});
|
||||
edges.push({from: 1, to: 7});
|
||||
edges.push({from: 2, to: 8});
|
||||
edges.push({from: 2, to: 9});
|
||||
edges.push({from: 3, to: 14});
|
||||
edges.push({from: 1, to: 12});
|
||||
edges.push({from: 16, to: 15});
|
||||
edges.push({from: 15, to: 17});
|
||||
edges.push({from: 18, to: 17});
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
|
||||
var options = {
|
||||
layout: {
|
||||
hierarchical: {
|
||||
sortMethod: layoutMethod
|
||||
}
|
||||
},
|
||||
edges: {
|
||||
smooth: true,
|
||||
arrows: {to : true }
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<h2>Hierarchical layout difference</h2>
|
||||
<div style="width:700px; font-size:14px; text-align: justify;">
|
||||
This example shows a the effect of the different hierarchical layout methods. Hubsize is based on the amount of edges connected to a node.
|
||||
The node with the most connections (the largest hub) is drawn at the top of the tree. The direction method is based on the direction of the edges.
|
||||
Try switching between the methods with the dropdown box below.
|
||||
</div>
|
||||
Layout method:
|
||||
<select id="layout">
|
||||
<option value="hubsize">hubsize</option>
|
||||
<option value="directed">directed</option>
|
||||
</select><br/>
|
||||
<br />
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<p id="selection"></p>
|
||||
<script language="JavaScript">
|
||||
var dropdown = document.getElementById("layout");
|
||||
dropdown.onchange = function() {
|
||||
layoutMethod = dropdown.value;
|
||||
draw();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+51
-89
@@ -13,9 +13,9 @@
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
@@ -36,84 +36,39 @@
|
||||
edges = [];
|
||||
var connectionCount = [];
|
||||
|
||||
// randomly create some nodes and edges
|
||||
for (var i = 0; i < 15; i++) {
|
||||
nodes.push({
|
||||
id: i,
|
||||
label: String(i)
|
||||
});
|
||||
}
|
||||
edges.push({
|
||||
from: 0,
|
||||
to: 1
|
||||
});
|
||||
edges.push({
|
||||
from: 0,
|
||||
to: 6
|
||||
});
|
||||
edges.push({
|
||||
from: 0,
|
||||
to: 13
|
||||
});edges.push({
|
||||
from: 0,
|
||||
to: 11
|
||||
});
|
||||
edges.push({
|
||||
from: 1,
|
||||
to: 2
|
||||
});
|
||||
edges.push({
|
||||
from: 2,
|
||||
to: 3
|
||||
});
|
||||
edges.push({
|
||||
from: 2,
|
||||
to: 4
|
||||
});
|
||||
edges.push({
|
||||
from: 3,
|
||||
to: 5
|
||||
});
|
||||
edges.push({
|
||||
from: 1,
|
||||
to: 10
|
||||
});
|
||||
edges.push({
|
||||
from: 1,
|
||||
to: 7
|
||||
});
|
||||
edges.push({
|
||||
from: 2,
|
||||
to: 8
|
||||
});
|
||||
edges.push({
|
||||
from: 2,
|
||||
to: 9
|
||||
});
|
||||
edges.push({
|
||||
from: 3,
|
||||
to: 14
|
||||
});
|
||||
edges.push({
|
||||
from: 1,
|
||||
to: 12
|
||||
});
|
||||
nodes[0]["level"] = 0;
|
||||
nodes[1]["level"] = 1;
|
||||
nodes[2]["level"] = 3;
|
||||
nodes[3]["level"] = 4;
|
||||
nodes[4]["level"] = 4;
|
||||
nodes[5]["level"] = 5;
|
||||
nodes[6]["level"] = 1;
|
||||
nodes[7]["level"] = 2;
|
||||
nodes[8]["level"] = 4;
|
||||
nodes[9]["level"] = 4;
|
||||
nodes[10]["level"] = 2;
|
||||
nodes[11]["level"] = 1;
|
||||
nodes[12]["level"] = 2;
|
||||
nodes[13]["level"] = 1;
|
||||
nodes[14]["level"] = 5;
|
||||
|
||||
// randomly create some nodes and edges
|
||||
for (var i = 0; i < 15; i++) {
|
||||
nodes.push({id: i,label: String(i)});
|
||||
}
|
||||
edges.push({from: 0, to: 1 });
|
||||
edges.push({from: 0, to: 6 });
|
||||
edges.push({from: 0, to: 13});
|
||||
edges.push({from: 0, to: 11});
|
||||
edges.push({from: 1, to: 2 });
|
||||
edges.push({from: 2, to: 3 });
|
||||
edges.push({from: 2, to: 4 });
|
||||
edges.push({from: 3, to: 5 });
|
||||
edges.push({from: 1, to: 10});
|
||||
edges.push({from: 1, to: 7 });
|
||||
edges.push({from: 2, to: 8 });
|
||||
edges.push({from: 2, to: 9 });
|
||||
edges.push({from: 3, to: 14});
|
||||
edges.push({from: 1, to: 12});
|
||||
nodes[0]["level"] = 0;
|
||||
nodes[1]["level"] = 1;
|
||||
nodes[2]["level"] = 3;
|
||||
nodes[3]["level"] = 4;
|
||||
nodes[4]["level"] = 4;
|
||||
nodes[5]["level"] = 5;
|
||||
nodes[6]["level"] = 1;
|
||||
nodes[7]["level"] = 2;
|
||||
nodes[8]["level"] = 4;
|
||||
nodes[9]["level"] = 4;
|
||||
nodes[10]["level"] = 2;
|
||||
nodes[11]["level"] = 1;
|
||||
nodes[12]["level"] = 2;
|
||||
nodes[13]["level"] = 1;
|
||||
nodes[14]["level"] = 5;
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
@@ -123,8 +78,13 @@
|
||||
};
|
||||
|
||||
var options = {
|
||||
hierarchicalLayout: {
|
||||
direction: directionInput.value
|
||||
edges: {
|
||||
smooth: true
|
||||
},
|
||||
layout: {
|
||||
hierarchical:{
|
||||
direction: directionInput.value
|
||||
}
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
@@ -136,6 +96,7 @@
|
||||
}
|
||||
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
@@ -144,12 +105,13 @@
|
||||
This example shows a user-defined hierarchical layout. If the user defines levels for nodes but does not do so for all nodes, an alert will show up and hierarchical layout will be disabled. Either all or none can be defined.
|
||||
If the smooth curves appear to be inverted, the direction of the edge is not in the same direction as the network.
|
||||
</div>
|
||||
<input type="button" id="btn-UD" value="Up-Down">
|
||||
<input type="button" id="btn-DU" value="Down-Up">
|
||||
<input type="button" id="btn-LR" value="Left-Right">
|
||||
<input type="button" id="btn-RL" value="Right-Left">
|
||||
<input type="hidden" id='direction' value="UD">
|
||||
<br />
|
||||
<p>
|
||||
<input type="button" id="btn-UD" value="Up-Down">
|
||||
<input type="button" id="btn-DU" value="Down-Up">
|
||||
<input type="button" id="btn-LR" value="Left-Right">
|
||||
<input type="button" id="btn-RL" value="Right-Left">
|
||||
<input type="hidden" id='direction' value="UD">
|
||||
</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
@@ -160,7 +122,7 @@
|
||||
btnUD.onclick = function() {
|
||||
directionInput.value = "UD";
|
||||
draw();
|
||||
}
|
||||
};
|
||||
var btnDU = document.getElementById("btn-DU");
|
||||
btnDU.onclick = function() {
|
||||
directionInput.value = "DU";
|
||||
@@ -1,42 +1,49 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Selections</title>
|
||||
<title>Network | Setting the random seed</title>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 400px;
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width:600px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>
|
||||
Create a simple network with some nodes and edges but with a fixed seed. This means the layout will be the same every time the nodes
|
||||
are settled.
|
||||
</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
<div id="info"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// create an array with nodes
|
||||
var nodes = [
|
||||
var nodes = new vis.DataSet([
|
||||
{id: 1, label: 'Node 1'},
|
||||
{id: 2, label: 'Node 2'},
|
||||
{id: 3, label: 'Node 3'},
|
||||
{id: 4, label: 'Node 4'},
|
||||
{id: 5, label: 'Node 5'}
|
||||
];
|
||||
]);
|
||||
|
||||
// create an array with edges
|
||||
var edges = [
|
||||
{from: 1, to: 2},
|
||||
var edges = new vis.DataSet([
|
||||
{from: 1, to: 3},
|
||||
{from: 1, to: 2},
|
||||
{from: 2, to: 4},
|
||||
{from: 2, to: 5}
|
||||
];
|
||||
]);
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
@@ -44,21 +51,10 @@
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'box'
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
// add event listener
|
||||
network.on('select', function(properties) {
|
||||
document.getElementById('info').innerHTML += 'selection: ' + JSON.stringify(properties) + '<br>';
|
||||
});
|
||||
|
||||
// set initial selection (id's of some nodes)
|
||||
network.selectNodes([3, 4, 5]);
|
||||
var options = {layout:{randomSeed:2}};
|
||||
var network = new vis.Network(container, data, options);
|
||||
</script>
|
||||
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+15
-14
@@ -16,8 +16,8 @@
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
@@ -29,16 +29,16 @@
|
||||
var LENGTH_SUB = 50;
|
||||
|
||||
|
||||
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="243" height="65">' +
|
||||
'<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#ffffff" ></rect>' +
|
||||
'<foreignObject x="15" y="10" width="100%" height="100%">' +
|
||||
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
|
||||
'<em>I</em> like' +
|
||||
'<span style="color:white; text-shadow:0 0 20px #000000;">' +
|
||||
'cheese</span>' +
|
||||
'</div>' +
|
||||
'</foreignObject>' +
|
||||
'</svg>';
|
||||
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="390" height="65">' +
|
||||
'<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#ffffff" ></rect>' +
|
||||
'<foreignObject x="15" y="10" width="100%" height="100%">' +
|
||||
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
|
||||
' <em>I</em> am' +
|
||||
'<span style="color:white; text-shadow:0 0 20px #000000;">' +
|
||||
' HTML in SVG!</span>' +
|
||||
'</div>' +
|
||||
'</foreignObject>' +
|
||||
'</svg>';
|
||||
|
||||
var DOMURL = window.URL || window.webkitURL || window;
|
||||
|
||||
@@ -65,12 +65,13 @@
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
stabilize: false,
|
||||
smoothCurves:false
|
||||
physics: {stabilization: false},
|
||||
edges: {smooth: false}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
+16
-16
@@ -15,8 +15,8 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var DIR = 'img/soft-scraps-icons/';
|
||||
@@ -29,26 +29,26 @@
|
||||
function draw() {
|
||||
// create people.
|
||||
// value corresponds with the age of the person
|
||||
var DIR = 'img/indonesia/';
|
||||
var DIR = '../img/indonesia/';
|
||||
nodes = [
|
||||
{id: 1, shape: 'circularImage', image: DIR + '1.png'},
|
||||
{id: 2, shape: 'circularImage', image: DIR + '2.png'},
|
||||
{id: 3, shape: 'circularImage', image: DIR + '3.png'},
|
||||
{id: 4, label:"pictures by this guy!", shape: 'circularImage', image: DIR + '4.png'},
|
||||
{id: 4, shape: 'circularImage', image: DIR + '4.png', label:"pictures by this guy!"},
|
||||
{id: 5, shape: 'circularImage', image: DIR + '5.png'},
|
||||
{id: 6, shape: 'circularImage', image: DIR + '6.png'},
|
||||
{id: 7, shape: 'circularImage', image: DIR + '7.png'},
|
||||
{id: 8, shape: 'circularImage', image: DIR + '8.png'},
|
||||
{id: 9, shape: 'circularImage', image: DIR + '9.png'},
|
||||
{id: 10, shape: 'circularImage', image: DIR + '10.png'},
|
||||
{id: 11, shape: 'circularImage', image: DIR + '11.png'},
|
||||
{id: 12, shape: 'circularImage', image: DIR + '12.png'},
|
||||
{id: 13, shape: 'circularImage', image: DIR + '13.png'},
|
||||
{id: 14, shape: 'circularImage', image: DIR + '14.png'},
|
||||
{id: 15, label:"when images\nfail\nto load", shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png'}
|
||||
{id: 10, shape: 'circularImage', image: DIR + '10.png'},
|
||||
{id: 11, shape: 'circularImage', image: DIR + '11.png'},
|
||||
{id: 12, shape: 'circularImage', image: DIR + '12.png'},
|
||||
{id: 13, shape: 'circularImage', image: DIR + '13.png'},
|
||||
{id: 14, shape: 'circularImage', image: DIR + '14.png'},
|
||||
{id: 15, shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"}
|
||||
];
|
||||
|
||||
// create connetions between people
|
||||
// create connections between people
|
||||
// value corresponds with the amount of contact between two people
|
||||
edges = [
|
||||
{from: 1, to: 2},
|
||||
@@ -64,8 +64,7 @@
|
||||
{from: 10, to: 11},
|
||||
{from: 11, to: 12},
|
||||
{from: 12, to: 13},
|
||||
{from: 13, to: 14},
|
||||
{from: 14, to: 15}
|
||||
{from: 13, to: 14}
|
||||
];
|
||||
|
||||
// create a network
|
||||
@@ -77,11 +76,12 @@
|
||||
var options = {
|
||||
nodes: {
|
||||
borderWidth:4,
|
||||
size:30,
|
||||
color: {
|
||||
border: '#222222',
|
||||
background: '#666666'
|
||||
},
|
||||
fontColor:'#eeeeee'
|
||||
font:{color:'#eeeeee'}
|
||||
},
|
||||
edges: {
|
||||
color: 'lightgray'
|
||||
@@ -90,11 +90,11 @@
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="draw()">
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<div id="info"></div>
|
||||
<div id="mynetwork"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,67 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Basic usage</title>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width:700px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
Nodes can be all kinds of colors. This example shows all possible ways of defining colors. If you supply an object, the undefined fields will assume the default colors.
|
||||
When supplying a hex or rgb format color, it will be parsed and variations will be created for highlight and hover. Edges with inheritColor take the border colors.
|
||||
</p>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// create an array with nodes
|
||||
var nodes = new vis.DataSet([
|
||||
{id: 1, label:'html color', color: 'lime'},
|
||||
{id: 2, label:'rgb color', color: 'rgb(255,168,7)'},
|
||||
{id: 3, label:'hex color', color: '#7BE141'},
|
||||
{id: 4, label:'rgba color', color: 'rgba(97,195,238,0.5)'},
|
||||
{id: 5, label:'colorObject', color: {background:'pink', border:'purple'}},
|
||||
{id: 6, label:'colorObject + highlight', color: {background:'#F03967', border:'#713E7F',highlight:{background:'red',border:'black'}}},
|
||||
{id: 7, label:'colorObject + highlight + hover', color: {background:'cyan', border:'blue',highlight:{background:'red',border:'blue'},hover:{background:'white',border:'red'}}}
|
||||
])
|
||||
|
||||
// create an array with edges
|
||||
var edges = new vis.DataSet([
|
||||
{from: 1, to: 3},
|
||||
{from: 1, to: 2},
|
||||
{from: 2, to: 4},
|
||||
{from: 2, to: 5},
|
||||
{from: 2, to: 6},
|
||||
{from: 4, to: 7},
|
||||
]);
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {borderWidth: 2},
|
||||
interaction: {hover: true}
|
||||
}
|
||||
var network = new vis.Network(container, data, options);
|
||||
</script>
|
||||
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,134 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Custom Groups</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
color: #d3d3d3;
|
||||
font: 12pt arial;
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
#mynetwork {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
border: 1px solid #444444;
|
||||
background-color: #222222;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
|
||||
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
<script type="text/javascript">
|
||||
var color = 'gray';
|
||||
var len = undefined;
|
||||
|
||||
var nodes = [
|
||||
{id: 0, label: "0", group: 'source'},
|
||||
{id: 1, label: "1", group: 'icons'},
|
||||
{id: 2, label: "2", group: 'icons'},
|
||||
{id: 3, label: "3", group: 'icons'},
|
||||
{id: 4, label: "4", group: 'icons'},
|
||||
{id: 5, label: "5", group: 'icons'},
|
||||
{id: 6, label: "6", group: 'icons'},
|
||||
{id: 7, label: "7", group: 'icons'},
|
||||
{id: 8, label: "8", group: 'icons'},
|
||||
{id: 9, label: "9", group: 'icons'},
|
||||
{id: 10, label: "10", group: 'mints'},
|
||||
{id: 11, label: "11", group: 'mints'},
|
||||
{id: 12, label: "12", group: 'mints'},
|
||||
{id: 13, label: "13", group: 'mints'},
|
||||
{id: 14, label: "14", group: 'mints'},
|
||||
{id: 15, group: 'dotsWithLabel'},
|
||||
{id: 16, group: 'dotsWithLabel'},
|
||||
{id: 17, group: 'dotsWithLabel'},
|
||||
{id: 18, group: 'dotsWithLabel'},
|
||||
{id: 19, group: 'dotsWithLabel'},
|
||||
{id: 20, label: "diamonds", group: 'diamonds'},
|
||||
{id: 21, label: "diamonds", group: 'diamonds'},
|
||||
{id: 22, label: "diamonds", group: 'diamonds'},
|
||||
{id: 23, label: "diamonds", group: 'diamonds'},
|
||||
];
|
||||
var edges = [
|
||||
{from: 1, to: 0},
|
||||
{from: 2, to: 0},
|
||||
{from: 4, to: 3},
|
||||
{from: 5, to: 4},
|
||||
{from: 4, to: 0},
|
||||
{from: 7, to: 6},
|
||||
{from: 8, to: 7},
|
||||
{from: 7, to: 0},
|
||||
{from: 10, to: 9},
|
||||
{from: 11, to: 10},
|
||||
{from: 10, to: 4},
|
||||
{from: 13, to: 12},
|
||||
{from: 14, to: 13},
|
||||
{from: 13, to: 0},
|
||||
{from: 16, to: 15},
|
||||
{from: 17, to: 15},
|
||||
{from: 15, to: 10},
|
||||
{from: 19, to: 18},
|
||||
{from: 20, to: 19},
|
||||
{from: 19, to: 4},
|
||||
{from: 22, to: 21},
|
||||
{from: 23, to: 22},
|
||||
{from: 23, to: 0},
|
||||
]
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
size: 20,
|
||||
font: {
|
||||
size: 15,
|
||||
color: '#ffffff'
|
||||
},
|
||||
borderWidth: 2
|
||||
},
|
||||
edges: {
|
||||
width: 2
|
||||
},
|
||||
groups: {
|
||||
diamonds: {
|
||||
color: {background:'red',border:'white'},
|
||||
shape: 'diamond'
|
||||
},
|
||||
dotsWithLabel: {
|
||||
label: "I'm a dot!",
|
||||
shape: 'dot',
|
||||
color: 'cyan'
|
||||
},
|
||||
mints: {color:'rgb(0,255,140)'},
|
||||
icons: {
|
||||
shape: 'icon',
|
||||
icon: {
|
||||
face: 'FontAwesome',
|
||||
code: '\uf0c0',
|
||||
size: 50,
|
||||
color: 'orange'
|
||||
}
|
||||
},
|
||||
source: {
|
||||
color:{border:'white'}
|
||||
}
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,119 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Groups</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
color: #d3d3d3;
|
||||
font: 12pt arial;
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
#mynetwork {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
border: 1px solid #444444;
|
||||
background-color: #222222;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
<script type="text/javascript">
|
||||
var color = 'gray';
|
||||
var len = undefined;
|
||||
|
||||
var nodes = [{id: 0, label: "0", group: 0},
|
||||
{id: 1, label: "1", group: 0},
|
||||
{id: 2, label: "2", group: 0},
|
||||
{id: 3, label: "3", group: 1},
|
||||
{id: 4, label: "4", group: 1},
|
||||
{id: 5, label: "5", group: 1},
|
||||
{id: 6, label: "6", group: 2},
|
||||
{id: 7, label: "7", group: 2},
|
||||
{id: 8, label: "8", group: 2},
|
||||
{id: 9, label: "9", group: 3},
|
||||
{id: 10, label: "10", group: 3},
|
||||
{id: 11, label: "11", group: 3},
|
||||
{id: 12, label: "12", group: 4},
|
||||
{id: 13, label: "13", group: 4},
|
||||
{id: 14, label: "14", group: 4},
|
||||
{id: 15, label: "15", group: 5},
|
||||
{id: 16, label: "16", group: 5},
|
||||
{id: 17, label: "17", group: 5},
|
||||
{id: 18, label: "18", group: 6},
|
||||
{id: 19, label: "19", group: 6},
|
||||
{id: 20, label: "20", group: 6},
|
||||
{id: 21, label: "21", group: 7},
|
||||
{id: 22, label: "22", group: 7},
|
||||
{id: 23, label: "23", group: 7},
|
||||
{id: 24, label: "24", group: 8},
|
||||
{id: 25, label: "25", group: 8},
|
||||
{id: 26, label: "26", group: 8},
|
||||
{id: 27, label: "27", group: 9},
|
||||
{id: 28, label: "28", group: 9},
|
||||
{id: 29, label: "29", group: 9}
|
||||
];
|
||||
var edges = [{from: 1, to: 0},
|
||||
{from: 2, to: 0},
|
||||
{from: 4, to: 3},
|
||||
{from: 5, to: 4},
|
||||
{from: 4, to: 0},
|
||||
{from: 7, to: 6},
|
||||
{from: 8, to: 7},
|
||||
{from: 7, to: 0},
|
||||
{from: 10, to: 9},
|
||||
{from: 11, to: 10},
|
||||
{from: 10, to: 4},
|
||||
{from: 13, to: 12},
|
||||
{from: 14, to: 13},
|
||||
{from: 13, to: 0},
|
||||
{from: 16, to: 15},
|
||||
{from: 17, to: 15},
|
||||
{from: 15, to: 10},
|
||||
{from: 19, to: 18},
|
||||
{from: 20, to: 19},
|
||||
{from: 19, to: 4},
|
||||
{from: 22, to: 21},
|
||||
{from: 23, to: 22},
|
||||
{from: 22, to: 13},
|
||||
{from: 25, to: 24},
|
||||
{from: 26, to: 25},
|
||||
{from: 25, to: 7},
|
||||
{from: 28, to: 27},
|
||||
{from: 29, to: 28},
|
||||
{from: 28, to: 0}
|
||||
]
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
size: 30,
|
||||
font: {
|
||||
size: 32,
|
||||
color: '#ffffff'
|
||||
},
|
||||
borderWidth: 2
|
||||
},
|
||||
edges: {
|
||||
width: 2
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,196 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Network | node as icon</title>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
|
||||
|
||||
<style>
|
||||
#mynetworkFA,
|
||||
#mynetworkIO {
|
||||
height: 300px;
|
||||
width: 700px;
|
||||
border:1px solid lightgrey;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width:700px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script language="JavaScript">
|
||||
function draw() {
|
||||
/*
|
||||
* Example for FontAwesome
|
||||
*/
|
||||
var optionsFA = {
|
||||
groups: {
|
||||
usergroups: {
|
||||
shape: 'icon',
|
||||
icon: {
|
||||
face: 'FontAwesome',
|
||||
code: '\uf0c0',
|
||||
size: 50,
|
||||
color: '#57169a'
|
||||
}
|
||||
},
|
||||
users: {
|
||||
shape: 'icon',
|
||||
icon: {
|
||||
face: 'FontAwesome',
|
||||
code: '\uf007',
|
||||
size: 50,
|
||||
color: '#aa00ff'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// create an array with nodes
|
||||
var nodesFA = [{
|
||||
id: 1,
|
||||
label: 'User 1',
|
||||
group: 'users'
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'User 2',
|
||||
group: 'users'
|
||||
}, {
|
||||
id: 3,
|
||||
label: 'Usergroup 1',
|
||||
group: 'usergroups'
|
||||
}, {
|
||||
id: 4,
|
||||
label: 'Usergroup 2',
|
||||
group: 'usergroups'
|
||||
}, {
|
||||
id: 5,
|
||||
label: 'Organisation 1',
|
||||
shape: 'icon',
|
||||
icon: {
|
||||
face: 'FontAwesome',
|
||||
code: '\uf1ad',
|
||||
size: 50,
|
||||
color: '#f0a30a'
|
||||
}
|
||||
}];
|
||||
|
||||
// create an array with edges
|
||||
var edges = [{
|
||||
from: 1,
|
||||
to: 3
|
||||
}, {
|
||||
from: 1,
|
||||
to: 4
|
||||
}, {
|
||||
from: 2,
|
||||
to: 4
|
||||
}, {
|
||||
from: 3,
|
||||
to: 5
|
||||
}, {
|
||||
from: 4,
|
||||
to: 5
|
||||
}];
|
||||
|
||||
// create a network
|
||||
var containerFA = document.getElementById('mynetworkFA');
|
||||
var dataFA = {
|
||||
nodes: nodesFA,
|
||||
edges: edges
|
||||
};
|
||||
|
||||
var networkFA = new vis.Network(containerFA, dataFA, optionsFA);
|
||||
|
||||
/*
|
||||
* Example for Ionicons
|
||||
*/
|
||||
var optionsIO = {
|
||||
groups: {
|
||||
usergroups: {
|
||||
shape: 'icon',
|
||||
icon: {
|
||||
face: 'Ionicons',
|
||||
code: '\uf47c',
|
||||
size: 50,
|
||||
color: '#57169a'
|
||||
}
|
||||
},
|
||||
users: {
|
||||
shape: 'icon',
|
||||
icon: {
|
||||
face: 'Ionicons',
|
||||
code: '\uf47e',
|
||||
size: 50,
|
||||
color: '#aa00ff'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// create an array with nodes
|
||||
var nodesIO = [{
|
||||
id: 1,
|
||||
label: 'User 1',
|
||||
group: 'users'
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'User 2',
|
||||
group: 'users'
|
||||
}, {
|
||||
id: 3,
|
||||
label: 'Usergroup 1',
|
||||
group: 'usergroups'
|
||||
}, {
|
||||
id: 4,
|
||||
label: 'Usergroup 2',
|
||||
group: 'usergroups'
|
||||
}, {
|
||||
id: 5,
|
||||
label: 'Organisation 1',
|
||||
shape: 'icon',
|
||||
icon: {
|
||||
face: 'Ionicons',
|
||||
code: '\uf276',
|
||||
size: 50,
|
||||
color: '#f0a30a'
|
||||
}
|
||||
}];
|
||||
|
||||
|
||||
// create a network
|
||||
var containerIO = document.getElementById('mynetworkIO');
|
||||
var dataIO = {
|
||||
nodes: nodesIO,
|
||||
edges: edges
|
||||
};
|
||||
|
||||
var networkIO = new vis.Network(containerIO, dataIO, optionsIO);
|
||||
}
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
<body onload="draw()">
|
||||
<p>
|
||||
Icons can be used for nodes as well. This example shows Icons from fontAwesome and Ionicons but it should work with similar packages as well.
|
||||
It uses unicode and css to define the icons.<br><br> <b>Remember! Unicode in javascript is done like this: \uf274 for the unicode f274.</b>
|
||||
<br> If a node is shown as a rectangle, it means the css is not loaded (or not yet loaded). A redraw will fix that.
|
||||
|
||||
</p>
|
||||
|
||||
<h2>
|
||||
<i class="fa fa-flag"></i> Use FontAwesome-icons for nodes</h2>
|
||||
<div id="mynetworkFA"></div>
|
||||
<h2>
|
||||
<i class="ion ion-ionic"></i> Use Ionicons-icons for nodes</h2>
|
||||
<div id="mynetworkIO"></div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -4,9 +4,6 @@
|
||||
<title>Network | Images</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt arial;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
@@ -14,17 +11,17 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../dist/vis.js"></script>
|
||||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
var DIR = 'img/refresh-cl/';
|
||||
var LENGTH_MAIN = 150;
|
||||
var LENGTH_SUB = 50;
|
||||
var DIR = '../img/refresh-cl/';
|
||||
var EDGE_LENGTH_MAIN = 150;
|
||||
var EDGE_LENGTH_SUB = 50;
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function draw() {
|
||||
@@ -37,29 +34,29 @@
|
||||
nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
|
||||
nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
|
||||
nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
|
||||
edges.push({from: 1, to: 2, length: LENGTH_MAIN});
|
||||
edges.push({from: 1, to: 3, length: LENGTH_MAIN});
|
||||
edges.push({from: 1, to: 2, length: EDGE_LENGTH_MAIN});
|
||||
edges.push({from: 1, to: 3, length: EDGE_LENGTH_MAIN});
|
||||
|
||||
for (var i = 4; i <= 7; i++) {
|
||||
nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image'});
|
||||
edges.push({from: 2, to: i, length: LENGTH_SUB});
|
||||
edges.push({from: 2, to: i, length: EDGE_LENGTH_SUB});
|
||||
}
|
||||
|
||||
nodes.push({id: 101, label: 'Printer', image: DIR + 'Hardware-Printer-Blue-icon.png', shape: 'image'});
|
||||
edges.push({from: 2, to: 101, length: LENGTH_SUB});
|
||||
edges.push({from: 2, to: 101, length: EDGE_LENGTH_SUB});
|
||||
|
||||
nodes.push({id: 102, label: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', shape: 'image'});
|
||||
edges.push({from: 3, to: 102, length: LENGTH_SUB});
|
||||
edges.push({from: 3, to: 102, length: EDGE_LENGTH_SUB});
|
||||
|
||||
nodes.push({id: 103, label: 'network drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
|
||||
edges.push({from: 1, to: 103, length: LENGTH_SUB});
|
||||
edges.push({from: 1, to: 103, length: EDGE_LENGTH_SUB});
|
||||
|
||||
nodes.push({id: 104, label: 'Internet', image: DIR + 'System-Firewall-2-icon.png', shape: 'image'});
|
||||
edges.push({from: 1, to: 104, length: LENGTH_SUB});
|
||||
edges.push({from: 1, to: 104, length: EDGE_LENGTH_SUB});
|
||||
|
||||
for (var i = 200; i <= 201; i++ ) {
|
||||
nodes.push({id: i, label: 'Smartphone', image: DIR + 'Hardware-My-PDA-02-icon.png', shape: 'image'});
|
||||
edges.push({from: 3, to: i, length: LENGTH_SUB});
|
||||
edges.push({from: 3, to: i, length: EDGE_LENGTH_SUB});
|
||||
}
|
||||
|
||||
// create a network
|
||||
@@ -68,16 +65,17 @@
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
stabilize: false // stabilize positions before displaying
|
||||
};
|
||||
var options = {};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
|
||||
<body onload="draw()">
|
||||
|
||||
<p>
|
||||
Display nodes as images.
|
||||
</p>
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
</body>
|
||||
@@ -0,0 +1,119 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Groups</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
color: #d3d3d3;
|
||||
font: 12pt arial;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#mynetwork {
|
||||
width: 800px;
|
||||
height: 800px;
|
||||
border: 1px solid #444444;
|
||||
background-color: #dddddd;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
<script type="text/javascript">
|
||||
var len = undefined;
|
||||
|
||||
var nodes = [{id: 0, label: "0", group: 0},
|
||||
{id: 1, label: "1", group: 0},
|
||||
{id: 2, label: "2", group: 0},
|
||||
{id: 3, label: "3", group: 1},
|
||||
{id: 4, label: "4", group: 1},
|
||||
{id: 5, label: "5", group: 1},
|
||||
{id: 6, label: "6", group: 2},
|
||||
{id: 7, label: "7", group: 2},
|
||||
{id: 8, label: "8", group: 2},
|
||||
{id: 9, label: "9", group: 3},
|
||||
{id: 10, label: "10", group: 3},
|
||||
{id: 11, label: "11", group: 3},
|
||||
{id: 12, label: "12", group: 4},
|
||||
{id: 13, label: "13", group: 4},
|
||||
{id: 14, label: "14", group: 4},
|
||||
{id: 15, label: "15", group: 5},
|
||||
{id: 16, label: "16", group: 5},
|
||||
{id: 17, label: "17", group: 5},
|
||||
{id: 18, label: "18", group: 6},
|
||||
{id: 19, label: "19", group: 6},
|
||||
{id: 20, label: "20", group: 6},
|
||||
{id: 21, label: "21", group: 7},
|
||||
{id: 22, label: "22", group: 7},
|
||||
{id: 23, label: "23", group: 7},
|
||||
{id: 24, label: "24", group: 8},
|
||||
{id: 25, label: "25", group: 8},
|
||||
{id: 26, label: "26", group: 8},
|
||||
{id: 27, label: "27", group: 9},
|
||||
{id: 28, label: "28", group: 9},
|
||||
{id: 29, label: "29", group: 9}
|
||||
];
|
||||
var edges = [{from: 1, to: 0},
|
||||
{from: 2, to: 0},
|
||||
{from: 4, to: 3},
|
||||
{from: 5, to: 4},
|
||||
{from: 4, to: 0},
|
||||
{from: 7, to: 6},
|
||||
{from: 8, to: 7},
|
||||
{from: 7, to: 0},
|
||||
{from: 10, to: 9},
|
||||
{from: 11, to: 10},
|
||||
{from: 10, to: 4},
|
||||
{from: 13, to: 12},
|
||||
{from: 14, to: 13},
|
||||
{from: 13, to: 0},
|
||||
{from: 16, to: 15},
|
||||
{from: 17, to: 15},
|
||||
{from: 15, to: 10},
|
||||
{from: 19, to: 18},
|
||||
{from: 20, to: 19},
|
||||
{from: 19, to: 4},
|
||||
{from: 22, to: 21},
|
||||
{from: 23, to: 22},
|
||||
{from: 22, to: 13},
|
||||
{from: 25, to: 24},
|
||||
{from: 26, to: 25},
|
||||
{from: 25, to: 7},
|
||||
{from: 28, to: 27},
|
||||
{from: 29, to: 28},
|
||||
{from: 28, to: 0}
|
||||
]
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
size: 30,
|
||||
font: {
|
||||
size: 32
|
||||
},
|
||||
borderWidth: 2,
|
||||
shadow:true
|
||||
},
|
||||
edges: {
|
||||
width: 2,
|
||||
shadow:true
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,72 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Shapes</title>
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 1000px;
|
||||
height: 800px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function draw() {
|
||||
nodes = [
|
||||
{id: 1, label: 'circle', shape: 'circle' },
|
||||
{id: 2, label: 'ellipse', shape: 'ellipse'},
|
||||
{id: 3, label: 'database',shape: 'database'},
|
||||
{id: 4, label: 'box', shape: 'box' },
|
||||
{id: 5, label: 'diamond', shape: 'diamond'},
|
||||
{id: 6, label: 'dot', shape: 'dot'},
|
||||
{id: 7, label: 'square', shape: 'square'},
|
||||
{id: 8, label: 'triangle',shape: 'triangle'},
|
||||
{id: 9, label: 'triangleDown', shape: 'triangleDown'},
|
||||
{id: 10, label: 'text', shape: 'text'},
|
||||
{id: 11, label: 'star', shape: 'star'},
|
||||
{id: 21, font:{size:30}, label: 'big circle', shape: 'circle' },
|
||||
{id: 22, font:{size:30}, label: 'big ellipse', shape: 'ellipse'},
|
||||
{id: 23, font:{size:30}, label: 'big database',shape: 'database'},
|
||||
{id: 24, font:{size:30}, label: 'big box', shape: 'box' },
|
||||
{id: 25, font:{size:30}, size:40, label: 'big diamond', shape: 'diamond'},
|
||||
{id: 26, font:{size:30}, size:40, label: 'big dot', shape: 'dot'},
|
||||
{id: 27, font:{size:30}, size:40, label: 'big square', shape: 'square'},
|
||||
{id: 28, font:{size:30}, size:40, label: 'big triangle',shape: 'triangle'},
|
||||
{id: 29, font:{size:30}, size:40, label: 'big triangleDown', shape: 'triangleDown'},
|
||||
{id: 30, font:{size:30}, label: 'big text', shape: 'text'},
|
||||
{id: 31, font:{size:30}, size:40, label: 'big star', shape: 'star'}
|
||||
];
|
||||
|
||||
edges = [
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {physics:{barnesHut:{gravitationalConstant:-4000}}};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
|
||||
<body onload="draw()">
|
||||
|
||||
<p>
|
||||
Nodes can have all sorts of shapes. Note the exception where the nodes with text inside and the text type's size are determined by the font size, not the node size.
|
||||
</p>
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<div id="info"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Shapes</title>
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 1000px;
|
||||
height: 800px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function draw() {
|
||||
nodes = [
|
||||
{id: 1, font:{size:30}, label: 'circle', shape: 'circle' , shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 2, font:{size:30}, label: 'ellipse', shape: 'ellipse', shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 3, font:{size:30}, label: 'database',shape: 'database', shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 4, font:{size:30}, label: 'box', shape: 'box' , shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 5, font:{size:30}, size:40, label: 'diamond', shape: 'diamond', shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 6, font:{size:30}, size:40, label: 'dot', shape: 'dot', shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 7, font:{size:30}, size:40, label: 'square', shape: 'square', shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 8, font:{size:30}, size:40, label: 'triangle',shape: 'triangle', shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 9, font:{size:30}, size:40, label: 'triangleDown', shape: 'triangleDown', shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 10, font:{size:30}, size:40, label: 'star', shape: 'star', shapeProperties:{borderDashes:[5,5]}},
|
||||
{id: 11, font:{size:30}, size:40, label: 'circularImage', shape: 'circularImage', image: '../img/indonesia/4.png', shapeProperties: {borderDashes:[15,5]}},
|
||||
];
|
||||
|
||||
edges = [
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {physics:{barnesHut:{gravitationalConstant:-4000}}};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
|
||||
<body onload="draw()">
|
||||
|
||||
<p>
|
||||
Nodes can have all sorts of shapes. Note the exception where the nodes with text inside and the text type's size are determined by the font size, not the node size.
|
||||
</p>
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<div id="info"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,279 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Animation</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
|
||||
div.left {
|
||||
position:relative;
|
||||
float:left;
|
||||
width:300px;
|
||||
border: 1px #c7c7c7 solid;
|
||||
height:590px;
|
||||
padding:5px;
|
||||
}
|
||||
|
||||
div.right {
|
||||
padding-left:10px;
|
||||
float:left;
|
||||
width:600px;
|
||||
}
|
||||
|
||||
div.bottom {
|
||||
position:absolute;
|
||||
bottom:5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../exampleUtil.js"></script>
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
var offsetx, offsety, scale, positionx, positiony, duration, easingFunction, doButton, focusButton, showButton;
|
||||
var statusUpdateSpan;
|
||||
var finishMessage = '';
|
||||
var showInterval = false;
|
||||
var showPhase = 1;
|
||||
var amountOfNodes = 25;
|
||||
|
||||
function destroy() {
|
||||
if (network !== null) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
}
|
||||
|
||||
function updateValues() {
|
||||
offsetx = parseInt(document.getElementById('offsetx').value);
|
||||
offsety = parseInt(document.getElementById('offsety').value);
|
||||
duration = parseInt(document.getElementById('duration').value);
|
||||
scale = parseFloat(document.getElementById('scale').value);
|
||||
positionx = parseInt(document.getElementById('positionx').value);
|
||||
positiony = parseInt(document.getElementById('positiony').value);
|
||||
easingFunction = document.getElementById('easingFunction').value;
|
||||
}
|
||||
|
||||
function draw() {
|
||||
destroy();
|
||||
statusUpdateSpan = document.getElementById('statusUpdate');
|
||||
doButton = document.getElementById('btnDo');
|
||||
focusButton = document.getElementById('btnFocus');
|
||||
showButton = document.getElementById('btnShow');
|
||||
|
||||
// randomly create some nodes and edges
|
||||
var data = getScaleFreeNetwork(amountOfNodes);
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var options = {
|
||||
physics: {
|
||||
stabilization: {
|
||||
iterations: 1200
|
||||
}
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
// add event listeners
|
||||
network.on('select', function(params) {
|
||||
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
|
||||
});
|
||||
network.on('stabilized', function (params) {
|
||||
document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
|
||||
});
|
||||
network.on('animationFinished', function() {
|
||||
statusUpdateSpan.innerHTML = finishMessage;
|
||||
})
|
||||
}
|
||||
|
||||
function fitAnimated() {
|
||||
updateValues();
|
||||
|
||||
var options = {offset: {x:offsetx,y:offsety},
|
||||
duration: duration,
|
||||
easingFunction: easingFunction
|
||||
};
|
||||
statusUpdateSpan.innerHTML = 'Doing fit() Animation.';
|
||||
finishMessage = 'Animation finished.';
|
||||
network.fit({animation:options});
|
||||
}
|
||||
|
||||
function doDefaultAnimation() {
|
||||
updateValues();
|
||||
|
||||
var options = {
|
||||
position: {x:positionx,y:positiony},
|
||||
scale: scale,
|
||||
offset: {x:offsetx,y:offsety},
|
||||
animation: true // default duration is 1000ms and default easingFunction is easeInOutQuad.
|
||||
};
|
||||
statusUpdateSpan.innerHTML = 'Doing Animation.';
|
||||
finishMessage = 'Animation finished.';
|
||||
network.moveTo(options);
|
||||
}
|
||||
|
||||
function doAnimation() {
|
||||
updateValues();
|
||||
|
||||
var options = {
|
||||
position: {x:positionx,y:positiony},
|
||||
scale: scale,
|
||||
offset: {x:offsetx,y:offsety},
|
||||
animation: {
|
||||
duration: duration,
|
||||
easingFunction: easingFunction
|
||||
}
|
||||
};
|
||||
statusUpdateSpan.innerHTML = 'Doing Animation.';
|
||||
finishMessage = 'Animation finished.';
|
||||
network.moveTo(options);
|
||||
}
|
||||
|
||||
function focusRandom() {
|
||||
updateValues();
|
||||
|
||||
var nodeId = Math.floor(Math.random() * amountOfNodes);
|
||||
var options = {
|
||||
// position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes
|
||||
scale: scale,
|
||||
offset: {x:offsetx,y:offsety},
|
||||
animation: {
|
||||
duration: duration,
|
||||
easingFunction: easingFunction
|
||||
}
|
||||
};
|
||||
statusUpdateSpan.innerHTML = 'Focusing on node: ' + nodeId;
|
||||
finishMessage = 'Node: ' + nodeId + ' in focus.';
|
||||
network.focus(nodeId, options);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function startShow() {
|
||||
updateValues();
|
||||
if (showInterval !== false) {
|
||||
showInterval = false;
|
||||
showButton.value = 'Start a show!';
|
||||
network.fit();
|
||||
}
|
||||
else {
|
||||
showButton.value = 'Stop the show!';
|
||||
focusRandom();
|
||||
setTimeout(doTheShow, duration);
|
||||
showInterval = true;
|
||||
}
|
||||
}
|
||||
|
||||
function doTheShow() {
|
||||
updateValues();
|
||||
if (showInterval == true) {
|
||||
if (showPhase == 0) {
|
||||
focusRandom();
|
||||
showPhase = 1;
|
||||
}
|
||||
else {
|
||||
fitAnimated();
|
||||
showPhase = 0;
|
||||
}
|
||||
setTimeout(doTheShow, duration);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<h2>Camera animations</h2>
|
||||
<div style="width:700px; font-size:14px;">
|
||||
You can move the view around programmatically using the .moveTo(options) function. The options supplied to this function can
|
||||
also be (partially) supplied to the .fit() and .focusOnNode() methods. These are explained in the docs.
|
||||
<br /><br/>
|
||||
The buttons below take the fields from the table when they can. For instance, the "Animate with default settings." takes the position, scale and offset while using
|
||||
the default animation values for duration and easing function. The focusOnNode takes everything except the position and the fit takes only the duration and easing function.
|
||||
<br/><br/>
|
||||
Here you can see a full description of the options you can supply to moveTo:
|
||||
</div>
|
||||
<pre>
|
||||
var moveToOptions = {
|
||||
position: {x:x, y:x}, // position to animate to (Numbers)
|
||||
scale: 1.0, // scale to animate to (Number)
|
||||
offset: {x:x, y:y}, // offset from the center in DOM pixels (Numbers)
|
||||
animation: { // animation object, can also be Boolean
|
||||
duration: 1000, // animation duration in milliseconds (Number)
|
||||
easingFunction: "easeInOutQuad" // Animation easing function, available are:
|
||||
} // linear, easeInQuad, easeOutQuad, easeInOutQuad,
|
||||
} // easeInCubic, easeOutCubic, easeInOutCubic,
|
||||
// easeInQuart, easeOutQuart, easeInOutQuart,
|
||||
// easeInQuint, easeOutQuint, easeInOutQuint
|
||||
</pre>
|
||||
<div class="left">
|
||||
<table>
|
||||
<tr>
|
||||
<td>position x</td><td><input type="text" value="300" id="positionx" style="width:170px;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>position y</td><td><input type="text" value="300" id="positiony" style="width:170px;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>scale</td><td><input type="text" value="1.0" id="scale" style="width:170px;"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>offset x</td><td><input type="text" value="0" id="offsetx" style="width:170px;"> px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>offset y</td><td><input type="text" value="0" id="offsety" style="width:170px;"> px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>duration</td><td><input type="text" value="1000" id="duration" style="width:170px;"> ms</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>easingFunction</td><td>
|
||||
<select id="easingFunction" style="width:174px;">
|
||||
<option value="linear">linear</option>
|
||||
<option value="easeInQuad">easeInQuad</option>
|
||||
<option value="easeOutQuad">easeOutQuad</option>
|
||||
<option value="easeInOutQuad" selected="selected">easeInOutQuad</option>
|
||||
<option value="easeInCubic">easeInCubic</option>
|
||||
<option value="easeOutCubic">easeOutCubic</option>
|
||||
<option value="easeInOutCubic">easeInOutCubic</option>
|
||||
<option value="easeInQuart">easeInQuart</option>
|
||||
<option value="easeOutQuart">easeOutQuart</option>
|
||||
<option value="easeInOutQuart">easeInOutQuart</option>
|
||||
<option value="easeInQuint">easeInQuint</option>
|
||||
<option value="easeOutQuint">easeOutQuint</option>
|
||||
<option value="easeInOutQuint">easeInOutQuint</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="bottom">
|
||||
<span id="statusUpdate"></span><br />
|
||||
Examples:
|
||||
<input type="button" onclick="doAnimation();" value="Animate with above settings." style="width:300px;" id="btnDo"> <br/>
|
||||
<input type="button" onclick="doDefaultAnimation();" value="Animate with default settings." style="width:300px;" id="btnDoDefault"> <br/>
|
||||
<input type="button" onclick="fitAnimated();" value="Animated fit()." style="width:300px;" id="btnZoom"> <br/>
|
||||
<input type="button" onclick="focusRandom();" value="Focus on random node." style="width:300px;" id="btnFocus"><br/>
|
||||
<input type="button" onclick="startShow();" value="Start a show!" style="width:300px;" id="btnShow"><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<p id="selection"></p>
|
||||
<p id="stabilization"></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,141 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Clustering</title>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
p {
|
||||
max-width:600px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom:3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<p>
|
||||
Click any of the buttons below to cluster the network. On every push the network will be reinitialized first. You can click on a cluster to open it.
|
||||
</p>
|
||||
|
||||
<input type="button" onclick="clusterByCid()" value="Cluster all nodes with CID = 1"> <br />
|
||||
<input type="button" onclick="clusterByColor()" value="Cluster by color"> <br />
|
||||
<input type="button" onclick="clusterByConnection()" value="Cluster 'node 1' by connections"> <br />
|
||||
<input type="button" onclick="clusterOutliers()" value="Cluster outliers"> <br />
|
||||
<input type="button" onclick="clusterByHubsize()" value="Cluster by hubsize"> <br />
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// create an array with nodes
|
||||
var nodes = [
|
||||
{id: 1, label: 'Node 1', color:'orange'},
|
||||
{id: 2, label: 'Node 2', color:'DarkViolet', font:{color:'white'}},
|
||||
{id: 3, label: 'Node 3', color:'orange'},
|
||||
{id: 4, label: 'Node 4', color:'DarkViolet', font:{color:'white'}},
|
||||
{id: 5, label: 'Node 5', color:'orange'},
|
||||
{id: 6, label: 'cid = 1', cid:1, color:'orange'},
|
||||
{id: 7, label: 'cid = 1', cid:1, color:'DarkViolet', font:{color:'white'}},
|
||||
{id: 8, label: 'cid = 1', cid:1, color:'lime'},
|
||||
{id: 9, label: 'cid = 1', cid:1, color:'orange'},
|
||||
{id: 10, label: 'cid = 1', cid:1, color:'lime'}
|
||||
];
|
||||
|
||||
// create an array with edges
|
||||
var edges = [
|
||||
{from: 1, to: 2},
|
||||
{from: 1, to: 3},
|
||||
{from: 10, to: 4},
|
||||
{from: 2, to: 5},
|
||||
{from: 6, to: 2},
|
||||
{from: 7, to: 5},
|
||||
{from: 8, to: 6},
|
||||
{from: 9, to: 7},
|
||||
{from: 10, to: 9}
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {layout:{randomSeed:8}};
|
||||
var network = new vis.Network(container, data, options);
|
||||
network.on("selectNode", function(params) {
|
||||
if (params.nodes.length == 1) {
|
||||
if (network.isCluster(params.nodes[0]) == true) {
|
||||
network.openCluster(params.nodes[0]);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function clusterByCid() {
|
||||
network.setData(data);
|
||||
var clusterOptionsByData = {
|
||||
joinCondition:function(childOptions) {
|
||||
return childOptions.cid == 1;
|
||||
},
|
||||
clusterNodeProperties: {id:'cidCluster', borderWidth:3, shape:'database'}
|
||||
}
|
||||
network.cluster(clusterOptionsByData);
|
||||
}
|
||||
function clusterByColor() {
|
||||
network.setData(data);
|
||||
var colors = ['orange','lime','DarkViolet'];
|
||||
var clusterOptionsByData;
|
||||
for (var i = 0; i < colors.length; i++) {
|
||||
var color = colors[i];
|
||||
clusterOptionsByData = {
|
||||
joinCondition: function (childOptions) {
|
||||
return childOptions.color.background == color; // the color is fully defined in the node.
|
||||
},
|
||||
processProperties: function (clusterOptions, childNodes, childEdges) {
|
||||
var totalMass = 0;
|
||||
for (var i = 0; i < childNodes.length; i++) {
|
||||
totalMass += childNodes[i].mass;
|
||||
}
|
||||
clusterOptions.mass = totalMass;
|
||||
return clusterOptions;
|
||||
},
|
||||
clusterNodeProperties: {id: 'cluster:' + color, borderWidth: 3, shape: 'database', color:color, label:'color:' + color}
|
||||
}
|
||||
network.cluster(clusterOptionsByData);
|
||||
}
|
||||
}
|
||||
function clusterByConnection() {
|
||||
network.setData(data);
|
||||
network.clusterByConnection(1)
|
||||
}
|
||||
function clusterOutliers() {
|
||||
network.setData(data);
|
||||
network.clusterOutliers();
|
||||
}
|
||||
function clusterByHubsize() {
|
||||
network.setData(data);
|
||||
var clusterOptionsByData = {
|
||||
processProperties: function(clusterOptions, childNodes) {
|
||||
clusterOptions.label = "[" + childNodes.length + "]";
|
||||
return clusterOptions;
|
||||
},
|
||||
clusterNodeProperties: {borderWidth:3, shape:'box', font:{size:30}}
|
||||
}
|
||||
network.clusterByHubsize(undefined, clusterOptionsByData);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,156 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Clustering</title>
|
||||
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<style type="text/css">
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<p>
|
||||
You can zoom in and out to cluster/decluster.
|
||||
</p>
|
||||
Stabilize when clustering:<input type="checkbox" id="stabilizeCheckbox">
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var clusterIndex = 0;
|
||||
var clusters = [];
|
||||
var lastClusterZoomLevel = 0;
|
||||
var clusterFactor = 0.9;
|
||||
|
||||
// create an array with nodes
|
||||
var nodes = [
|
||||
{id: 1, label: 'Node 1'},
|
||||
{id: 2, label: 'Node 2'},
|
||||
{id: 3, label: 'Node 3'},
|
||||
{id: 4, label: 'Node 4'},
|
||||
{id: 5, label: 'Node 5'},
|
||||
{id: 6, label: 'Node 6'},
|
||||
{id: 7, label: 'Node 7'},
|
||||
{id: 8, label: 'Node 8'},
|
||||
{id: 9, label: 'Node 9'},
|
||||
{id: 10, label: 'Node 10'}
|
||||
];
|
||||
|
||||
// create an array with edges
|
||||
var edges = [
|
||||
{from: 1, to: 2},
|
||||
{from: 1, to: 3},
|
||||
{from: 10, to: 4},
|
||||
{from: 2, to: 5},
|
||||
{from: 6, to: 2},
|
||||
{from: 7, to: 5},
|
||||
{from: 8, to: 6},
|
||||
{from: 9, to: 7},
|
||||
{from: 10, to: 9}
|
||||
];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {layout: {randomSeed: 8}};
|
||||
var network = new vis.Network(container, data, options);
|
||||
|
||||
// set the first initial zoom level
|
||||
network.once('initRedraw', function() {
|
||||
if (lastClusterZoomLevel === 0) {
|
||||
lastClusterZoomLevel = network.getScale();
|
||||
}
|
||||
});
|
||||
|
||||
// we use the zoom event for our clustering
|
||||
network.on('zoom', function (params) {
|
||||
if (params.direction == '-') {
|
||||
if (params.scale < lastClusterZoomLevel*clusterFactor) {
|
||||
makeClusters(params.scale);
|
||||
lastClusterZoomLevel = params.scale;
|
||||
}
|
||||
}
|
||||
else {
|
||||
openClusters(params.scale);
|
||||
}
|
||||
});
|
||||
|
||||
// if we click on a node, we want to open it up!
|
||||
network.on("selectNode", function (params) {
|
||||
if (params.nodes.length == 1) {
|
||||
if (network.isCluster(params.nodes[0]) == true) {
|
||||
network.openCluster(params.nodes[0])
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// make the clusters
|
||||
function makeClusters(scale) {
|
||||
var clusterOptionsByData = {
|
||||
processProperties: function (clusterOptions, childNodes) {
|
||||
clusterIndex = clusterIndex + 1;
|
||||
var childrenCount = 0;
|
||||
for (var i = 0; i < childNodes.length; i++) {
|
||||
childrenCount += childNodes[i].childrenCount || 1;
|
||||
}
|
||||
clusterOptions.childrenCount = childrenCount;
|
||||
clusterOptions.label = "# " + childrenCount + "";
|
||||
clusterOptions.font = {size: childrenCount*5+30}
|
||||
clusterOptions.id = 'cluster:' + clusterIndex;
|
||||
clusters.push({id:'cluster:' + clusterIndex, scale:scale});
|
||||
return clusterOptions;
|
||||
},
|
||||
clusterNodeProperties: {borderWidth: 3, shape: 'database', font: {size: 30}}
|
||||
}
|
||||
network.clusterOutliers(clusterOptionsByData);
|
||||
if (document.getElementById('stabilizeCheckbox').checked === true) {
|
||||
network.stabilize();
|
||||
}
|
||||
}
|
||||
|
||||
// open them back up!
|
||||
function openClusters(scale) {
|
||||
var newClusters = [];
|
||||
var declustered = false;
|
||||
for (var i = 0; i < clusters.length; i++) {
|
||||
if (clusters[i].scale < scale) {
|
||||
network.openCluster(clusters[i].id);
|
||||
lastClusterZoomLevel = scale;
|
||||
declustered = true;
|
||||
}
|
||||
else {
|
||||
newClusters.push(clusters[i])
|
||||
}
|
||||
}
|
||||
clusters = newClusters;
|
||||
if (declustered === true && document.getElementById('stabilizeCheckbox').checked === true) {
|
||||
network.stabilize();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,72 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Playing with Physics</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
float:left;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
margin:5px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
#config {
|
||||
float:left;
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size:16px;
|
||||
max-width:700px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script type="text/javascript" src="../exampleUtil.js"></script>
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function draw() {
|
||||
nodes = [];
|
||||
edges = [];
|
||||
// randomly create some nodes and edges
|
||||
var data = getScaleFreeNetwork(25);
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
|
||||
var options = {
|
||||
physics: {
|
||||
stabilization: false
|
||||
},
|
||||
configure: true
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
|
||||
<p>
|
||||
The configurator can be used to play with the options. In this example, all options that can be configured with this tool are shown.
|
||||
You can also supply a custom filter function or filter string. You can press the generate options button below to have an options object printed. You can then use
|
||||
this in the network.
|
||||
</p>
|
||||
<br />
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<p id="selection"></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,172 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Manipulation</title>
|
||||
|
||||
<style type="text/css">
|
||||
body, select {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
position:relative;
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
table.legend_table {
|
||||
font-size: 11px;
|
||||
border-width:1px;
|
||||
border-color:#d3d3d3;
|
||||
border-style:solid;
|
||||
}
|
||||
table.legend_table,td {
|
||||
border-width:1px;
|
||||
border-color:#d3d3d3;
|
||||
border-style:solid;
|
||||
padding: 2px;
|
||||
}
|
||||
div.table_content {
|
||||
width:80px;
|
||||
text-align:center;
|
||||
}
|
||||
div.table_description {
|
||||
width:100px;
|
||||
}
|
||||
|
||||
#operation {
|
||||
font-size:28px;
|
||||
}
|
||||
#network-popUp {
|
||||
display:none;
|
||||
position:absolute;
|
||||
top:350px;
|
||||
left:170px;
|
||||
z-index:299;
|
||||
width:250px;
|
||||
height:120px;
|
||||
background-color: #f9f9f9;
|
||||
border-style:solid;
|
||||
border-width:3px;
|
||||
border-color: #5394ed;
|
||||
padding:10px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="../exampleUtil.js"></script>
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
// randomly create some nodes and edges
|
||||
var data = getScaleFreeNetwork(25);
|
||||
var seed = 2;
|
||||
|
||||
|
||||
function destroy() {
|
||||
if (network !== null) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
destroy();
|
||||
nodes = [];
|
||||
edges = [];
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var options = {
|
||||
layout: {randomSeed:seed}, // just to make sure the layout is the same when the locale is changed
|
||||
locale: document.getElementById('locale').value,
|
||||
manipulation: {
|
||||
addNode: function (data, callback) {
|
||||
// filling in the popup DOM elements
|
||||
document.getElementById('operation').innerHTML = "Add Node";
|
||||
document.getElementById('node-id').value = data.id;
|
||||
document.getElementById('node-label').value = data.label;
|
||||
document.getElementById('saveButton').onclick = saveData.bind(this, data, callback);
|
||||
document.getElementById('cancelButton').onclick = clearPopUp.bind();
|
||||
document.getElementById('network-popUp').style.display = 'block';
|
||||
},
|
||||
editNode: function (data, callback) {
|
||||
// filling in the popup DOM elements
|
||||
document.getElementById('operation').innerHTML = "Edit Node";
|
||||
document.getElementById('node-id').value = data.id;
|
||||
document.getElementById('node-label').value = data.label;
|
||||
document.getElementById('saveButton').onclick = saveData.bind(this, data, callback);
|
||||
document.getElementById('cancelButton').onclick = cancelEdit.bind(this,callback);
|
||||
document.getElementById('network-popUp').style.display = 'block';
|
||||
},
|
||||
addEdge: function (data, callback) {
|
||||
if (data.from == data.to) {
|
||||
var r = confirm("Do you want to connect the node to itself?");
|
||||
if (r == true) {
|
||||
callback(data);
|
||||
}
|
||||
}
|
||||
else {
|
||||
callback(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
|
||||
function clearPopUp() {
|
||||
document.getElementById('saveButton').onclick = null;
|
||||
document.getElementById('cancelButton').onclick = null;
|
||||
document.getElementById('network-popUp').style.display = 'none';
|
||||
}
|
||||
|
||||
function cancelEdit(callback) {
|
||||
clearPopUp();
|
||||
callback(null);
|
||||
}
|
||||
|
||||
function saveData(data,callback) {
|
||||
data.id = document.getElementById('node-id').value;
|
||||
data.label = document.getElementById('node-label').value;
|
||||
clearPopUp();
|
||||
callback(data);
|
||||
}
|
||||
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<h2>Editing the nodes and edges (localized)</h2>
|
||||
<p style="width: 700px; font-size:14px; text-align: justify;">
|
||||
The localization is only relevant to the manipulation buttons.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="locale">Select a locale:</label>
|
||||
<select id="locale" onchange="draw();">
|
||||
<option value="en" selected>en</option>
|
||||
<option value="nl">nl</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<div id="network-popUp">
|
||||
<span id="operation">node</span> <br>
|
||||
<table style="margin:auto;"><tr>
|
||||
<td>id</td><td><input id="node-id" value="new value" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>label</td><td><input id="node-label" value="new value" /></td>
|
||||
</tr></table>
|
||||
<input type="button" value="save" id="saveButton" />
|
||||
<input type="button" value="cancel" id="cancelButton" />
|
||||
</div>
|
||||
<br />
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Navigation</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
table.legend_table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.legend_table td,
|
||||
table.legend_table th {
|
||||
border: 1px solid #d3d3d3;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
table.legend_table td {
|
||||
text-align: center;
|
||||
width:110px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../exampleUtil.js"></script>
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function destroy() {
|
||||
if (network !== null) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
destroy();
|
||||
|
||||
// create an array with nodes
|
||||
var nodes = [
|
||||
{id: 1, label: 'Node 1'},
|
||||
{id: 2, label: 'Node 2'},
|
||||
{id: 3, label: 'Node 3'},
|
||||
{id: 4, label: 'Node 4'},
|
||||
{id: 5, label: 'Node 5'}
|
||||
];
|
||||
|
||||
// create an array with edges
|
||||
var edges = new vis.DataSet([
|
||||
{from: 1, to: 3},
|
||||
{from: 1, to: 2},
|
||||
{from: 2, to: 4},
|
||||
{from: 2, to: 5}
|
||||
]);
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
};
|
||||
var options = {
|
||||
interaction: {
|
||||
navigationButtons: true,
|
||||
keyboard: true
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
|
||||
// add event listeners
|
||||
network.on('select', function(params) {
|
||||
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
<h2>Navigation controls and keyboad navigation</h2>
|
||||
<div style="width: 800px; font-size:14px; text-align: justify;">
|
||||
This example is the same as example 2, except for the navigation controls that have been activated. The navigation controls are described below. <br /><br />
|
||||
<table class="legend_table">
|
||||
<tr>
|
||||
<th>Icons: </th>
|
||||
<td><img src="../../../dist/img/network/upArrow.png" /> </td>
|
||||
<td><img src="../../../dist/img/network/downArrow.png" /> </td>
|
||||
<td><img src="../../../dist/img/network/leftArrow.png" /> </td>
|
||||
<td><img src="../../../dist/img/network/rightArrow.png" /> </td>
|
||||
<td><img src="../../../dist/img/network/plus.png" /> </td>
|
||||
<td><img src="../../../dist/img/network/minus.png" /> </td>
|
||||
<td><img src="../../../dist/img/network/zoomExtends.png" /> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Keyboard shortcuts:</th>
|
||||
<td><div>Up arrow</div></td>
|
||||
<td><div>Down arrow</div></td>
|
||||
<td><div>Left arrow</div></td>
|
||||
<td><div>Right arrow</div></td>
|
||||
<td><div>=<br />[<br />Page up</div></td>
|
||||
<td><div>-<br />]<br />Page down</div></td>
|
||||
<td><div>None</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Description:</th>
|
||||
<td>Move up</td>
|
||||
<td>Move down</td>
|
||||
<td>Move left</td>
|
||||
<td>Move right</td>
|
||||
<td>Zoom in</td>
|
||||
<td>Zoom out</td>
|
||||
<td>Zoom extent</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above.
|
||||
Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. <u>To correctly display the navigation icons, the <b>vis.css</b> file must be included.</u>
|
||||
The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
|
||||
</div>
|
||||
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
<p id="selection"></p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,91 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Random nodes</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
|
||||
#message {
|
||||
color:darkred;
|
||||
max-width:600px;
|
||||
font-size:16px;
|
||||
cursor:pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../exampleUtil.js"></script>
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
var setSmooth = false;
|
||||
|
||||
function destroy() {
|
||||
if (network !== null) {
|
||||
network.destroy();
|
||||
network = null;
|
||||
}
|
||||
}
|
||||
|
||||
function draw() {
|
||||
destroy();
|
||||
var nodeCount = document.getElementById('nodeCount').value;
|
||||
if (nodeCount > 100) {
|
||||
document.getElementById("message").innerHTML = '<a onclick="disableSmoothCurves()">You may want to disable dynamic smooth curves for better performance with a large amount of nodes and edges. Click here to disable them.</a>';
|
||||
}
|
||||
else if (setSmooth === false) {
|
||||
document.getElementById("message").innerHTML = '';
|
||||
}
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
var data = getScaleFreeNetwork(nodeCount);
|
||||
var options = {
|
||||
physics: { stabilization: false }
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
|
||||
function disableSmoothCurves() {
|
||||
setSmooth = true;
|
||||
network.setOptions({edges:{smooth:{type:'continuous'}}});
|
||||
document.getElementById("message").innerHTML = '<a onclick="enableSmoothCurves()">Click here to reenable the dynamic smooth curves.</a>';
|
||||
}
|
||||
|
||||
function enableSmoothCurves() {
|
||||
setSmooth = false;
|
||||
document.getElementById("message").innerHTML = '<a onclick="disableSmoothCurves()">You may want to disable dynamic smooth curves for better performance with a large amount of nodes and edges. Click here to disable them.</a>';
|
||||
network.setOptions({edges:{smooth:{type:'dynamic'}}});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
<body onload="draw();">
|
||||
<p>
|
||||
Generate a random network with nodes and edges.
|
||||
</p>
|
||||
<p>
|
||||
<form onsubmit="draw(); return false;">
|
||||
<label for="nodeCount">Number of nodes:</label>
|
||||
<input id="nodeCount" type="text" value="25" style="width: 50px;">
|
||||
<input type="button" value="Go" onclick="draw()">
|
||||
</form>
|
||||
</p>
|
||||
<span id="message"></span>
|
||||
<div id="mynetwork"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Network | Playing with Physics</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 10pt sans;
|
||||
}
|
||||
#mynetwork {
|
||||
float:left;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
margin:5px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
#config {
|
||||
float:left;
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script type="text/javascript" src="../exampleUtil.js"></script>
|
||||
<script type="text/javascript" src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var nodes = null;
|
||||
var edges = null;
|
||||
var network = null;
|
||||
|
||||
function draw() {
|
||||
nodes = [];
|
||||
edges = [];
|
||||
// randomly create some nodes and edges
|
||||
var data = getScaleFreeNetwork(60);
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById('mynetwork');
|
||||
|
||||
var options = {
|
||||
physics: {
|
||||
stabilization: false
|
||||
},
|
||||
configure: {
|
||||
filter:function (option, path) {
|
||||
if (path.indexOf('physics') !== -1) {
|
||||
return true;
|
||||
}
|
||||
if (path.indexOf('smooth') !== -1 || option === 'smooth') {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
container: document.getElementById('config')
|
||||
}
|
||||
};
|
||||
network = new vis.Network(container, data, options);
|
||||
}
|
||||
</script>
|
||||
<script src="../../googleAnalytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="draw();">
|
||||
|
||||
<h2>Playing with Physics</h2>
|
||||
<div style="width: 700px; font-size:14px; text-align: justify;">
|
||||
Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, the network configurator can be used
|
||||
to explore which settings may be good for him or her. This is ment to be used during the development phase when you are implementing vis.js. Once you have found
|
||||
settings you are happy with, you can supply them to network using the documented physics options.
|
||||
</div>
|
||||
<br />
|
||||
<div id="mynetwork"></div>
|
||||
<div id="config"></div>
|
||||
|
||||
<p id="selection"></p>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user