├── .babelrc ├── .codeclimate.yml ├── .csslintrc ├── .eslintrc ├── .github ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .mdlrc ├── .npmignore ├── .travis.yml ├── CONTRIBUTING.md ├── HISTORY.md ├── LICENSE-APACHE-2.0 ├── LICENSE-MIT ├── README.md ├── bower.json ├── dist ├── img │ └── network │ │ ├── acceptDeleteIcon.png │ │ ├── addNodeIcon.png │ │ ├── backIcon.png │ │ ├── connectIcon.png │ │ ├── cross.png │ │ ├── cross2.png │ │ ├── deleteIcon.png │ │ ├── downArrow.png │ │ ├── editIcon.png │ │ ├── leftArrow.png │ │ ├── minus.png │ │ ├── plus.png │ │ ├── rightArrow.png │ │ ├── upArrow.png │ │ └── zoomExtends.png ├── vis-graph3d.min.js ├── vis-network.min.css ├── vis-network.min.js ├── vis-timeline-graph2d.min.css ├── vis-timeline-graph2d.min.js ├── vis.css ├── vis.js ├── vis.js.map ├── vis.map ├── vis.min.css └── vis.min.js ├── docs ├── css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── carousel.css │ ├── prettify.css │ ├── style.css │ └── tipuesearch.css ├── data │ ├── dataset.html │ ├── dataview.html │ └── index.html ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 ├── graph2d │ └── index.html ├── graph3d │ └── index.html ├── img │ ├── arrow.svg │ ├── crossword.png │ ├── crosswordStrong.png │ ├── external-link-icons │ │ ├── external-link-icon-white.png │ │ ├── external-link-icon.png │ │ └── license.txt │ ├── graph │ │ ├── graph.png │ │ └── graph120x60.png │ ├── graph3d.png │ ├── graph3d120x60.png │ ├── timeline │ │ ├── timeline.png │ │ └── timeline120x60.png │ ├── vis_overview.odg │ └── vis_overview.png ├── index.html ├── js │ ├── bootstrap.js │ ├── bootstrap.min.js │ ├── docs.min.js │ ├── googleAnalytics.js │ ├── ie-emulation-modes-warning.js │ ├── ie10-viewport-bug-workaround.js │ ├── jquery.highlight.js │ ├── jquery.min.js │ ├── jquery.url.min.js │ ├── main.js │ ├── prettify │ │ ├── lang-apollo.js │ │ ├── lang-css.js │ │ ├── lang-hs.js │ │ ├── lang-lisp.js │ │ ├── lang-lua.js │ │ ├── lang-ml.js │ │ ├── lang-proto.js │ │ ├── lang-scala.js │ │ ├── lang-sql.js │ │ ├── lang-vb.js │ │ ├── lang-vhdl.js │ │ ├── lang-wiki.js │ │ ├── lang-yaml.js │ │ ├── prettify.css │ │ └── prettify.js │ ├── smooth-scroll.min.js │ ├── tipuesearch.config.js │ ├── tipuesearch.js │ ├── tipuesearch.min.js │ └── toggleTable.js ├── network │ ├── configure.html │ ├── edges.html │ ├── groups.html │ ├── index.html │ ├── interaction.html │ ├── layout.html │ ├── manipulation.html │ ├── nodes.html │ └── physics.html └── timeline │ └── index.html ├── examples ├── graph2d │ ├── 01_basic.html │ ├── 02_bars.html │ ├── 03_groups.html │ ├── 04_rightAxis.html │ ├── 05_bothAxis.html │ ├── 06_interpolation.html │ ├── 07_scrollingAndSorting.html │ ├── 08_performance.html │ ├── 09_external_legend.html │ ├── 10_barsSideBySide.html │ ├── 11_barsSideBySideGroups.html │ ├── 12_customRange.html │ ├── 13_localization.html │ ├── 14_toggleGroups.html │ ├── 15_streaming_data.html │ ├── 16_bothAxisTitles.html │ ├── 17_dynamicStyling.html │ ├── 18_scatterplot.html │ ├── 19_labels.html │ ├── 20_shading.html │ ├── 21_barsWithEnd.html │ └── default.css ├── graph3d │ ├── 01_basics.html │ ├── 02_camera.html │ ├── 03_filter_data.html │ ├── 04_animation.html │ ├── 05_line.html │ ├── 06_moving_dots.html │ ├── 07_dot_cloud_colors.html │ ├── 08_dot_cloud_size.html │ ├── 09_mobile.html │ ├── 10_styling.html │ ├── 11_tooltips.html │ ├── 12_custom_labels.html │ ├── default.css │ └── playground │ │ ├── csv2array.js │ │ ├── csv2datatable.html │ │ ├── datasource.html │ │ ├── datasource.php │ │ ├── index.html │ │ ├── playground.css │ │ ├── playground.js │ │ └── prettify │ │ ├── lang-apollo.js │ │ ├── lang-css.js │ │ ├── lang-hs.js │ │ ├── lang-lisp.js │ │ ├── lang-lua.js │ │ ├── lang-ml.js │ │ ├── lang-proto.js │ │ ├── lang-scala.js │ │ ├── lang-sql.js │ │ ├── lang-vb.js │ │ ├── lang-vhdl.js │ │ ├── lang-wiki.js │ │ ├── lang-yaml.js │ │ ├── prettify.css │ │ └── prettify.js ├── network │ ├── basicUsage.html │ ├── data │ │ ├── datasets.html │ │ ├── dotLanguage │ │ │ ├── data │ │ │ │ ├── cellular_automata.gv.txt │ │ │ │ ├── computer_network.gv.txt │ │ │ │ └── simple.gv.txt │ │ │ ├── dotEdgeStyles.html │ │ │ ├── dotLanguage.html │ │ │ ├── dotPlayground.html │ │ │ └── graphvizGallery │ │ │ │ ├── fsm.gv.txt │ │ │ │ ├── hello.gv.txt │ │ │ │ ├── process.gv.txt │ │ │ │ ├── screenshots │ │ │ │ ├── fsm.png │ │ │ │ ├── hello.png │ │ │ │ ├── softmaint.png │ │ │ │ └── traffic_lights.png │ │ │ │ ├── siblings.gv.txt │ │ │ │ ├── softmaint.gv.txt │ │ │ │ ├── traffic_lights.gv.txt │ │ │ │ ├── transparency.gv.txt │ │ │ │ ├── twopi2.gv.txt │ │ │ │ ├── unix.gv.txt │ │ │ │ └── world.gv.txt │ │ ├── dynamicData.html │ │ ├── importingFromGephi.html │ │ ├── scalingCustom.html │ │ ├── scalingNodesEdges.html │ │ └── scalingNodesEdgesLabels.html │ ├── datasources │ │ ├── WorldCup2014.js │ │ ├── WorldCup2014.json │ │ └── largeHierarchicalDataset.js │ ├── edgeStyles │ │ ├── arrowTypes.html │ │ ├── arrows.html │ │ ├── colors.html │ │ ├── dashes.html │ │ ├── smooth.html │ │ └── smoothWorldCup.html │ ├── events │ │ ├── interactionEvents.html │ │ ├── physicsEvents.html │ │ └── renderEvents.html │ ├── exampleApplications │ │ ├── disassemblerExample.html │ │ ├── disassemblerExample.js │ │ ├── lesMiserables.html │ │ ├── loadingBar.html │ │ ├── neighbourhoodHighlight.html │ │ ├── nodeLegend.html │ │ └── worldCupPerformance.html │ ├── exampleUtil.js │ ├── imageSelected │ │ ├── broken-image.png │ │ ├── imageSelected.html │ │ ├── selected.svg │ │ └── unselected.svg │ ├── img │ │ ├── indonesia │ │ │ ├── 1.png │ │ │ ├── 10.png │ │ │ ├── 11.png │ │ │ ├── 12.png │ │ │ ├── 13.png │ │ │ ├── 14.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── 4.png │ │ │ ├── 5.png │ │ │ ├── 6.png │ │ │ ├── 7.png │ │ │ ├── 8.png │ │ │ └── 9.png │ │ ├── refresh-cl │ │ │ ├── Hardware-Fax-icon.png │ │ │ ├── Hardware-Laptop-1-icon.png │ │ │ ├── Hardware-Mobile-Phone-icon.png │ │ │ ├── Hardware-My-Computer-3-icon.png │ │ │ ├── Hardware-My-PDA-02-icon.png │ │ │ ├── Hardware-My-PDA-04-icon.png │ │ │ ├── Hardware-My-PDA-05-icon.png │ │ │ ├── Hardware-My-Phone-Picture-icon.png │ │ │ ├── Hardware-Printer-Blue-icon.png │ │ │ ├── Misc-Scanner-default-icon.png │ │ │ ├── Network-Drive-icon.png │ │ │ ├── Network-Internet-Connection-icon.png │ │ │ ├── Network-Pipe-icon.png │ │ │ ├── System-Firewall-2-icon.png │ │ │ ├── System-Globe-icon.png │ │ │ └── license.txt │ │ └── soft-scraps-icons │ │ │ ├── Document-icon24.png │ │ │ ├── Document-icon32.png │ │ │ ├── Document-icon48.png │ │ │ ├── Email-icon24.png │ │ │ ├── Email-icon32.png │ │ │ ├── Email-icon48.png │ │ │ ├── Folder-icon24.png │ │ │ ├── Folder-icon32.png │ │ │ ├── Folder-icon48.png │ │ │ ├── Folder-icon64.png │ │ │ ├── Smiley-Angry-icon.png │ │ │ ├── Smiley-Grin-icon.png │ │ │ ├── User-Administrator-Blue-icon.png │ │ │ ├── User-Administrator-Green-icon.png │ │ │ ├── User-Coat-Blue-icon.png │ │ │ ├── User-Coat-Green-icon.png │ │ │ ├── User-Coat-Red-icon.png │ │ │ ├── User-Executive-Green-icon.png │ │ │ ├── User-Preppy-Blue-icon.png │ │ │ ├── User-Preppy-Red-icon.png │ │ │ └── license.txt │ ├── labels │ │ ├── labelAlignment.html │ │ ├── labelBackground.html │ │ ├── labelColorAndSize.html │ │ ├── labelMargins.html │ │ ├── labelMultifont.html │ │ ├── labelStroke.html │ │ └── multilineText.html │ ├── layout │ │ ├── demo.jsonp │ │ ├── demo_big.jsonp │ │ ├── hierarchicalLayout.html │ │ ├── hierarchicalLayoutBigUserDefined.html │ │ ├── hierarchicalLayoutMethods.html │ │ ├── hierarchicalLayoutUserdefined.html │ │ ├── hierarchicalLayoutWithoutPhysics.html │ │ └── randomSeed.html │ ├── nodeStyles │ │ ├── HTMLInNodes.html │ │ ├── circularImages.html │ │ ├── colors.html │ │ ├── customGroups.html │ │ ├── groups.html │ │ ├── icons.html │ │ ├── images.html │ │ ├── imagesWithBorders.html │ │ ├── shadows.html │ │ ├── shapes.html │ │ ├── shapesWithDashedBorders.html │ │ └── widthHeight.html │ ├── other │ │ ├── animationShowcase.html │ │ ├── changingClusteredEdgesNodes.html │ │ ├── chosen.html │ │ ├── clustering.html │ │ ├── clusteringByZoom.html │ │ ├── clustersOfclusters.html │ │ ├── configuration.html │ │ ├── cursorChange.html │ │ ├── manipulation.html │ │ ├── manipulationEditEdgeNoDrag.html │ │ ├── navigation.html │ │ ├── onLoadAnimation.html │ │ ├── performance.html │ │ └── saveAndLoad.html │ └── physics │ │ └── physicsConfiguration.html └── timeline │ ├── basicUsage.html │ ├── dataHandling │ ├── dataSerialization.html │ └── loadExternalData.html │ ├── editing │ ├── customSnappingOfItems.html │ ├── editingItems.html │ ├── editingItemsCallbacks.html │ ├── individualEditableItems.html │ ├── itemsAlwaysDraggable.html │ ├── overrideEditingItems.html │ ├── tooltipOnItemChange.html │ └── updateDataOnEvent.html │ ├── groups │ ├── groups.html │ ├── groupsEditable.html │ ├── groupsOrdering.html │ ├── nestedGroups.html │ ├── subgroups.html │ └── verticalItemsHide.html │ ├── interaction │ ├── animateWindow.html │ ├── clickToUse.html │ ├── eventListeners.html │ ├── limitMoveAndZoom.html │ ├── navigationMenu.html │ ├── rollingMode.html │ └── setSelection.html │ ├── items │ ├── backgroundAreas.html │ ├── backgroundAreasWithGroups.html │ ├── expectedVsActualTimesItems.html │ ├── htmlContents.html │ ├── itemOrdering.html │ ├── pointItems.html │ ├── rangeOverflowItem.html │ ├── tooltip.html │ └── visibleFrameTemplateContent.html │ ├── other │ ├── customTimeBars.html │ ├── customTimeBarsTooltip.html │ ├── dataAttributes.html │ ├── dataAttributesAll.html │ ├── drag&drop.html │ ├── functionLabelFormats.html │ ├── groupsPerformance.html │ ├── hidingPeriods.html │ ├── horizontalScroll.html │ ├── localization.html │ ├── performance.html │ ├── requirejs │ │ ├── requirejs_example.html │ │ └── scripts │ │ │ ├── main.js │ │ │ └── require.js │ ├── rtl.html │ ├── stressPerformance.html │ ├── timezone.html │ ├── usingReact.html │ └── verticalScroll.html │ ├── resources │ ├── data │ │ ├── basic.json │ │ └── wk2014.json │ └── img │ │ ├── Hardware-Mobile-Phone-icon.png │ │ ├── attachment-icon.png │ │ ├── blog-post-edit-icon.png │ │ ├── comments-icon.png │ │ ├── community-users-icon.png │ │ ├── license.txt │ │ ├── license_aesthetica-2.txt │ │ ├── license_refresh-cl.txt │ │ ├── mail-icon.png │ │ ├── notes-edit-icon.png │ │ ├── product-icon.png │ │ └── truck-icon.png │ └── styling │ ├── axisOrientation.html │ ├── customCss.html │ ├── gridStyling.html │ ├── itemClassNames.html │ ├── itemTemplates.html │ └── weekStyling.html ├── gulpfile.js ├── index-graph3d.js ├── index-network.js ├── index-timeline-graph2d.js ├── index.js ├── lib ├── DOMutil.js ├── DataSet.js ├── DataView.js ├── Queue.js ├── graph3d │ ├── Camera.js │ ├── DataGroup.js │ ├── Filter.js │ ├── Graph3d.js │ ├── Point2d.js │ ├── Point3d.js │ ├── Range.js │ ├── Settings.js │ ├── Slider.js │ ├── StepNumber.js │ └── options.js ├── hammerUtil.js ├── header.js ├── module │ ├── hammer.js │ ├── moment.js │ └── uuid.js ├── network │ ├── CachedImage.js │ ├── Images.js │ ├── Network.js │ ├── NetworkUtil.js │ ├── css │ │ ├── network-colorpicker.css │ │ ├── network-manipulation.css │ │ └── network-navigation.css │ ├── dotparser.js │ ├── gephiParser.js │ ├── img │ │ ├── acceptDeleteIcon.png │ │ ├── addNodeIcon.png │ │ ├── backIcon.png │ │ ├── connectIcon.png │ │ ├── cross.png │ │ ├── cross2.png │ │ ├── deleteIcon.png │ │ ├── downArrow.png │ │ ├── editIcon.png │ │ ├── leftArrow.png │ │ ├── minus.png │ │ ├── plus.png │ │ ├── rightArrow.png │ │ ├── upArrow.png │ │ └── zoomExtends.png │ ├── locales.js │ ├── modules │ │ ├── Canvas.js │ │ ├── CanvasRenderer.js │ │ ├── Clustering.js │ │ ├── EdgesHandler.js │ │ ├── Groups.js │ │ ├── InteractionHandler.js │ │ ├── KamadaKawai.js │ │ ├── LayoutEngine.js │ │ ├── ManipulationSystem.js │ │ ├── NodesHandler.js │ │ ├── PhysicsEngine.js │ │ ├── SelectionHandler.js │ │ ├── View.js │ │ └── components │ │ │ ├── DirectionStrategy.js │ │ │ ├── Edge.js │ │ │ ├── NavigationHandler.js │ │ │ ├── Node.js │ │ │ ├── algorithms │ │ │ └── FloydWarshall.js │ │ │ ├── edges │ │ │ ├── BezierEdgeDynamic.js │ │ │ ├── BezierEdgeStatic.js │ │ │ ├── CubicBezierEdge.js │ │ │ ├── StraightEdge.js │ │ │ └── util │ │ │ │ ├── BezierEdgeBase.js │ │ │ │ ├── CubicBezierEdgeBase.js │ │ │ │ ├── EdgeBase.js │ │ │ │ └── EndPoints.js │ │ │ ├── nodes │ │ │ ├── Cluster.js │ │ │ ├── shapes │ │ │ │ ├── Box.js │ │ │ │ ├── Circle.js │ │ │ │ ├── CircularImage.js │ │ │ │ ├── Database.js │ │ │ │ ├── Diamond.js │ │ │ │ ├── Dot.js │ │ │ │ ├── Ellipse.js │ │ │ │ ├── Hexagon.js │ │ │ │ ├── Icon.js │ │ │ │ ├── Image.js │ │ │ │ ├── Square.js │ │ │ │ ├── Star.js │ │ │ │ ├── Text.js │ │ │ │ ├── Triangle.js │ │ │ │ └── TriangleDown.js │ │ │ └── util │ │ │ │ ├── CircleImageBase.js │ │ │ │ ├── NodeBase.js │ │ │ │ └── ShapeBase.js │ │ │ ├── physics │ │ │ ├── BarnesHutSolver.js │ │ │ ├── CentralGravitySolver.js │ │ │ ├── FA2BasedCentralGravitySolver.js │ │ │ ├── FA2BasedRepulsionSolver.js │ │ │ ├── HierarchicalRepulsionSolver.js │ │ │ ├── HierarchicalSpringSolver.js │ │ │ ├── RepulsionSolver.js │ │ │ └── SpringSolver.js │ │ │ └── shared │ │ │ ├── ComponentUtil.js │ │ │ ├── Label.js │ │ │ ├── LabelAccumulator.js │ │ │ └── LabelSplitter.js │ ├── options.js │ └── shapes.js ├── shared │ ├── Activator.js │ ├── ColorPicker.js │ ├── Configurator.js │ ├── Popup.js │ ├── Validator.js │ ├── activator.css │ ├── bootstrap.css │ ├── configuration.css │ └── tooltip.css ├── timeline │ ├── .eslintrc │ ├── Core.js │ ├── DateUtil.js │ ├── Graph2d.js │ ├── Range.js │ ├── Stack.js │ ├── TimeStep.js │ ├── Timeline.js │ ├── component │ │ ├── BackgroundGroup.js │ │ ├── Component.js │ │ ├── CurrentTime.js │ │ ├── CustomTime.js │ │ ├── DataAxis.js │ │ ├── DataScale.js │ │ ├── GraphGroup.js │ │ ├── Group.js │ │ ├── ItemSet.js │ │ ├── Legend.js │ │ ├── LineGraph.js │ │ ├── TimeAxis.js │ │ ├── css │ │ │ ├── animation.css │ │ │ ├── currenttime.css │ │ │ ├── customtime.css │ │ │ ├── dataaxis.css │ │ │ ├── item.css │ │ │ ├── itemset.css │ │ │ ├── labelset.css │ │ │ ├── panel.css │ │ │ ├── pathStyles.css │ │ │ ├── timeaxis.css │ │ │ └── timeline.css │ │ ├── graph2d_types │ │ │ ├── bar.js │ │ │ ├── line.js │ │ │ └── points.js │ │ └── item │ │ │ ├── BackgroundItem.js │ │ │ ├── BoxItem.js │ │ │ ├── Item.js │ │ │ ├── PointItem.js │ │ │ └── RangeItem.js │ ├── locales.js │ ├── optionsGraph2d.js │ └── optionsTimeline.js └── util.js ├── misc ├── RELEASE_CHECKLIST_TEMPLATE.md ├── how_to_help.md ├── labels.md ├── we_need_help.md └── we_need_help.png ├── package.json └── test ├── DataSet.test.js ├── DataView.test.js ├── Graph3d.test.js ├── Label.test.js ├── Network.test.js ├── PointItem.test.js ├── Queue.test.js ├── TestSupport.js ├── TimeStep.test.js ├── TimelineItemSet.test.js ├── TimelineRange.test.js ├── Validator.test.js ├── dataset.html ├── dot.txt ├── dotparser.test.js ├── graph2dTest.html ├── network ├── basicUsage.js └── maximumWidthEdgeCase.html ├── networkTest.html ├── network_unittests.html ├── timeline.html ├── timeline_groups.html ├── timestep.html └── util.test.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"], 3 | "plugins": [ 4 | "transform-es3-property-literals", 5 | "transform-es3-member-expression-literals", 6 | "transform-runtime" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.codeclimate.yml: -------------------------------------------------------------------------------- 1 | languages: 2 | JavaScript: true 3 | engines: 4 | eslint: 5 | enabled: true 6 | csslint: 7 | enabled: true 8 | markdownlint: 9 | enabled: true 10 | duplication: 11 | enabled: true 12 | config: 13 | languages: 14 | javascript: 15 | mass_threshold: 300 16 | fixme : 17 | enabled: true 18 | ratings: 19 | paths: 20 | - "**/*.js" 21 | - "**/*.css" 22 | - "**/*.md" 23 | exclude_paths: 24 | - "dist/**/*" 25 | - "docs/**/*" 26 | - "examples/**/*" 27 | -------------------------------------------------------------------------------- /.csslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "adjoining-classes": false, 3 | "box-model": false, 4 | "box-sizing": false, 5 | "order-alphabetical": false 6 | } 7 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "node": true, 6 | "mocha": true 7 | }, 8 | 9 | "parserOptions": { 10 | "sourceType": "module", 11 | }, 12 | 13 | "extends": "eslint:recommended", 14 | 15 | // For the full list of rules, see: http://eslint.org/docs/rules/ 16 | "rules": { 17 | "complexity": [2, 55], 18 | "max-statements": [2, 115], 19 | "no-unreachable": 1, 20 | "no-useless-escape": 0, 21 | 22 | "no-console": 0, 23 | // To flag presence of console.log without breaking linting: 24 | //"no-console": ["warn", { allow: ["warn", "error"] }], 25 | 26 | "require-jsdoc": ["error", { 27 | "require": { 28 | "FunctionDeclaration": true, 29 | "MethodDefinition": true, 30 | "ClassDeclaration": true, 31 | "ArrowFunctionExpression": false 32 | } 33 | }], 34 | "valid-jsdoc": [2, { 35 | "requireReturnDescription": false, 36 | "requireReturn": false, 37 | "requireParamDescription": false, 38 | "requireReturnType": true 39 | }], 40 | "guard-for-in": 1, 41 | }, 42 | } 43 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | This project is no longer in active development. See #4259 for details. 2 | 3 | Please contribute to the [visjs community](https://github.com/visjs)! 4 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | This project is no longer in active development. See #4259 for details. 2 | 3 | Please contribute to the [visjs community](https://github.com/visjs)! 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # npm files 2 | node_modules 3 | npm-debug.log 4 | 5 | # ide or system files 6 | .idea 7 | .c9 8 | *.iml 9 | .project 10 | .settings/ 11 | .directory 12 | 13 | # temporary files 14 | .*.sw[op] 15 | .commits.tmp 16 | -------------------------------------------------------------------------------- /.mdlrc: -------------------------------------------------------------------------------- 1 | // Markdown Lint Rules 2 | // https://github.com/mivok/markdownlint/blob/master/docs/RULES.md 3 | 4 | rules 5 | "~MD012", // alert on multiple consecutive blank lines 6 | "~MD013", // line length should be no more than 80 characters 7 | "~MD014", // Dollar signs used before commands without showing output 8 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | misc 2 | node_modules 3 | test 4 | tools 5 | .idea 6 | bower.json 7 | Jakefile.js 8 | .npmignore 9 | .gitignore 10 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | env: 5 | - CXX=g++-4.8 6 | addons: 7 | apt: 8 | sources: 9 | - ubuntu-toolchain-r-test 10 | packages: 11 | - libgif-dev 12 | - g++-4.8 13 | code_climate: 14 | repo_token: 07de009e5f4d0a43c51b18f3443b2fe7ddcf3fea206e75c3a81b1c4030657f69 15 | cache: 16 | directories: 17 | - node_modules 18 | before_script: 19 | - npm run lint 20 | - npm install gulp 21 | script: 22 | - gulp 23 | - npm run-script test-cov 24 | after_script: 25 | - npm install -g codeclimate-test-reporter 26 | - codeclimate-test-reporter < ./coverage/lcov.info 27 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | This project is no longer in active development. See #4259 for details. 4 | 5 | Please consider contributing to the [visjs community](https://github.com/visjs)! 6 | -------------------------------------------------------------------------------- /LICENSE-MIT: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014-2017 Almende B.V. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vis", 3 | "main": ["dist/vis.js", "dist/vis.css"], 4 | "description": "A dynamic, browser-based visualization library.", 5 | "homepage": "http://visjs.org/", 6 | "license": ["Apache-2.0", "MIT"], 7 | "repository": { 8 | "type": "git", 9 | "url": "git://github.com/almende/vis.git" 10 | }, 11 | "keywords": [ 12 | "vis", 13 | "visualization", 14 | "web based", 15 | "browser based", 16 | "javascript", 17 | "chart", 18 | "linechart", 19 | "timeline", 20 | "graph", 21 | "network", 22 | "browser" 23 | ], 24 | "ignore": [ 25 | "gulpfile.js", 26 | "index*.js", 27 | "misc", 28 | "node_modules", 29 | "package.json", 30 | "test", 31 | "tools", 32 | "lib", 33 | ".idea", 34 | ".npmignore", 35 | ".gitignore" 36 | ], 37 | "dependencies": {}, 38 | "devDependencies": {} 39 | } 40 | -------------------------------------------------------------------------------- /dist/img/network/acceptDeleteIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/dist/img/network/acceptDeleteIcon.png -------------------------------------------------------------------------------- /dist/img/network/addNodeIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/dist/img/network/addNodeIcon.png -------------------------------------------------------------------------------- /dist/img/network/backIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/dist/img/network/backIcon.png -------------------------------------------------------------------------------- /dist/img/network/connectIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/dist/img/network/connectIcon.png -------------------------------------------------------------------------------- /dist/img/network/cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/dist/img/network/cross.png -------------------------------------------------------------------------------- /dist/img/network/cross2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/dist/img/network/cross2.png -------------------------------------------------------------------------------- /dist/img/network/deleteIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/dist/img/network/deleteIcon.png -------------------------------------------------------------------------------- /dist/img/network/downArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/dist/img/network/downArrow.png -------------------------------------------------------------------------------- /dist/img/network/editIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/dist/img/network/editIcon.png -------------------------------------------------------------------------------- /dist/img/network/leftArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/dist/img/network/leftArrow.png -------------------------------------------------------------------------------- /dist/img/network/minus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/dist/img/network/minus.png -------------------------------------------------------------------------------- /dist/img/network/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/dist/img/network/plus.png -------------------------------------------------------------------------------- /dist/img/network/rightArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/dist/img/network/rightArrow.png -------------------------------------------------------------------------------- /dist/img/network/upArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/dist/img/network/upArrow.png -------------------------------------------------------------------------------- /dist/img/network/zoomExtends.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/dist/img/network/zoomExtends.png -------------------------------------------------------------------------------- /docs/css/prettify.css: -------------------------------------------------------------------------------- 1 | .com { 2 | color: gray; 3 | } 4 | 5 | .lit { 6 | color: red; 7 | } 8 | 9 | .pun { 10 | color: gray; 11 | } 12 | 13 | .pln { 14 | color: #333333; 15 | } 16 | 17 | pre.prettyprint { 18 | border: 1px solid lightgray; 19 | background-color: #fcfcfc; 20 | padding: 5px; 21 | 22 | font-size: 10pt; 23 | line-height: 1.5em; 24 | font-family: monospace; 25 | } 26 | 27 | ol.linenums { 28 | margin-top:0; 29 | margin-bottom:0; 30 | } 31 | 32 | li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { 33 | list-style:none; 34 | } 35 | 36 | li.L1,li.L3,li.L5,li.L7,li.L9 { 37 | background:#eee; 38 | } 39 | 40 | .str,.atv { 41 | color: green; 42 | } 43 | 44 | .kwd,.tag { 45 | color:#2B7CE9; 46 | } 47 | 48 | .typ,.atn,.dec { 49 | color: darkorange; 50 | } 51 | 52 | @media print { 53 | .com { 54 | color:#600; 55 | font-style:italic; 56 | } 57 | 58 | .typ { 59 | color:#404; 60 | font-weight:700; 61 | } 62 | 63 | .lit { 64 | color:#044; 65 | } 66 | 67 | .pun { 68 | color:#440; 69 | } 70 | 71 | .pln { 72 | color:#000; 73 | } 74 | 75 | .atn { 76 | color:#404; 77 | } 78 | 79 | .str,.atv { 80 | color:#060; 81 | } 82 | 83 | .kwd,.tag { 84 | color:#006; 85 | font-weight:700; 86 | } 87 | } -------------------------------------------------------------------------------- /docs/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/docs/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /docs/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/docs/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /docs/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/docs/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /docs/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/docs/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /docs/img/crossword.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/docs/img/crossword.png -------------------------------------------------------------------------------- /docs/img/crosswordStrong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/docs/img/crosswordStrong.png -------------------------------------------------------------------------------- /docs/img/external-link-icons/external-link-icon-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/docs/img/external-link-icons/external-link-icon-white.png -------------------------------------------------------------------------------- /docs/img/external-link-icons/external-link-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/docs/img/external-link-icons/external-link-icon.png -------------------------------------------------------------------------------- /docs/img/external-link-icons/license.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/docs/img/external-link-icons/license.txt -------------------------------------------------------------------------------- /docs/img/graph/graph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/docs/img/graph/graph.png -------------------------------------------------------------------------------- /docs/img/graph/graph120x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/docs/img/graph/graph120x60.png -------------------------------------------------------------------------------- /docs/img/graph3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/docs/img/graph3d.png -------------------------------------------------------------------------------- /docs/img/graph3d120x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/docs/img/graph3d120x60.png -------------------------------------------------------------------------------- /docs/img/timeline/timeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/docs/img/timeline/timeline.png -------------------------------------------------------------------------------- /docs/img/timeline/timeline120x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/docs/img/timeline/timeline120x60.png -------------------------------------------------------------------------------- /docs/img/vis_overview.odg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/docs/img/vis_overview.odg -------------------------------------------------------------------------------- /docs/img/vis_overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/docs/img/vis_overview.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Redirection 7 | 8 | 9 | If you are not redirected automatically, follow this link. 10 | 11 | -------------------------------------------------------------------------------- /docs/js/googleAnalytics.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Alex on 4/23/2015. 3 | */ 4 | (function (i, s, o, g, r, a, m) { 5 | i['GoogleAnalyticsObject'] = r; 6 | i[r] = i[r] || function () { 7 | (i[r].q = i[r].q || []).push(arguments) 8 | }, i[r].l = 1 * new Date(); 9 | a = s.createElement(o), m = s.getElementsByTagName(o)[0]; 10 | a.async = 1; 11 | a.src = g; 12 | m.parentNode.insertBefore(a, m) 13 | })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); 14 | ga('create', 'UA-61231638-1', 'auto'); 15 | ga('send', 'pageview'); -------------------------------------------------------------------------------- /docs/js/ie10-viewport-bug-workaround.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * IE10 viewport hack for Surface/desktop Windows 8 bug 3 | * Copyright 2014 Twitter, Inc. 4 | * Licensed under the Creative Commons Attribution 3.0 Unported License. For 5 | * details, see http://creativecommons.org/licenses/by/3.0/. 6 | */ 7 | 8 | // See the Getting Started docs for more information: 9 | // http://getbootstrap.com/getting-started/#support-ie10-width 10 | 11 | (function () { 12 | 'use strict'; 13 | if (navigator.userAgent.match(/IEMobile\/10\.0/)) { 14 | var msViewportStyle = document.createElement('style') 15 | msViewportStyle.appendChild( 16 | document.createTextNode( 17 | '@-ms-viewport{width:auto!important}' 18 | ) 19 | ) 20 | document.querySelector('head').appendChild(msViewportStyle) 21 | } 22 | })(); 23 | -------------------------------------------------------------------------------- /docs/js/jquery.url.min.js: -------------------------------------------------------------------------------- 1 | /*! url - v1.8.6 - 2013-11-22 */window.url=function(){function a(a){return!isNaN(parseFloat(a))&&isFinite(a)}return function(b,c){var d=c||window.location.toString();if(!b)return d;b=b.toString(),"//"===d.substring(0,2)?d="http:"+d:1===d.split("://").length&&(d="http://"+d),c=d.split("/");var e={auth:""},f=c[2].split("@");1===f.length?f=f[0].split(":"):(e.auth=f[0],f=f[1].split(":")),e.protocol=c[0],e.hostname=f[0],e.port=f[1]||("https"===e.protocol.split(":")[0].toLowerCase()?"443":"80"),e.pathname=(c.length>3?"/":"")+c.slice(3,c.length).join("/").split("?")[0].split("#")[0];var g=e.pathname;"/"===g.charAt(g.length-1)&&(g=g.substring(0,g.length-1));var h=e.hostname,i=h.split("."),j=g.split("/");if("hostname"===b)return h;if("domain"===b)return/^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/.test(h)?h:i.slice(-2).join(".");if("sub"===b)return i.slice(0,i.length-2).join(".");if("port"===b)return e.port;if("protocol"===b)return e.protocol.split(":")[0];if("auth"===b)return e.auth;if("user"===b)return e.auth.split(":")[0];if("pass"===b)return e.auth.split(":")[1]||"";if("path"===b)return e.pathname;if("."===b.charAt(0)){if(b=b.substring(1),a(b))return b=parseInt(b,10),i[0>b?i.length+b:b-1]||""}else{if(a(b))return b=parseInt(b,10),j[0>b?j.length+b:b]||"";if("file"===b)return j.slice(-1)[0];if("filename"===b)return j.slice(-1)[0].split(".")[0];if("fileext"===b)return j.slice(-1)[0].split(".")[1]||"";if("?"===b.charAt(0)||"#"===b.charAt(0)){var k=d,l=null;if("?"===b.charAt(0)?k=(k.split("?")[1]||"").split("#")[0]:"#"===b.charAt(0)&&(k=k.split("#")[1]||""),!b.charAt(1))return k;b=b.substring(1),k=k.split("&");for(var m=0,n=k.length;n>m;m++)if(l=k[m].split("="),l[0]===b)return l[1]||"";return null}}return""}}(),"undefined"!=typeof jQuery&&jQuery.extend({url:function(a,b){return window.url(a,b)}}); -------------------------------------------------------------------------------- /docs/js/prettify/lang-apollo.js: -------------------------------------------------------------------------------- 1 | PR.registerLangHandler(PR.createSimpleLexer([["com",/^#[^\r\n]*/,null,"#"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:ADS|AD|AUG|BZF|BZMF|CAE|CAF|CA|CCS|COM|CS|DAS|DCA|DCOM|DCS|DDOUBL|DIM|DOUBLE|DTCB|DTCF|DV|DXCH|EDRUPT|EXTEND|INCR|INDEX|NDX|INHINT|LXCH|MASK|MSK|MP|MSU|NOOP|OVSK|QXCH|RAND|READ|RELINT|RESUME|RETURN|ROR|RXOR|SQUARE|SU|TCR|TCAA|OVSK|TCF|TC|TS|WAND|WOR|WRITE|XCH|XLQ|XXALQ|ZL|ZQ|ADD|ADZ|SUB|SUZ|MPY|MPR|MPZ|DVP|COM|ABS|CLA|CLZ|LDQ|STO|STQ|ALS|LLS|LRS|TRA|TSQ|TMI|TOV|AXT|TIX|DLY|INP|OUT)\s/, 2 | null],["typ",/^(?:-?GENADR|=MINUS|2BCADR|VN|BOF|MM|-?2CADR|-?[1-6]DNADR|ADRES|BBCON|[SE]?BANK\=?|BLOCK|BNKSUM|E?CADR|COUNT\*?|2?DEC\*?|-?DNCHAN|-?DNPTR|EQUALS|ERASE|MEMORY|2?OCT|REMADR|SETLOC|SUBRO|ORG|BSS|BES|SYN|EQU|DEFINE|END)\s/,null],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[!-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["apollo","agc","aea"]) -------------------------------------------------------------------------------- /docs/js/prettify/lang-css.js: -------------------------------------------------------------------------------- 1 | PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[ \t\r\n\f]+/,null," \t\r\n\u000c"]],[["str",/^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/,null],["str",/^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/,null],["lang-css-str",/^url\(([^\)\"\']*)\)/i],["kwd",/^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//], 2 | ["com",/^(?: 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |

21 | This demo shows how to load external data via an ajax call. 22 |

23 |
24 |
loading...
25 | 26 | 57 | 58 | -------------------------------------------------------------------------------- /examples/timeline/editing/customSnappingOfItems.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Timeline | Custom snapping 5 | 6 | 7 | 8 | 9 | 10 | 11 |

12 | When moving the items in on the Timeline below, they will snap to full hours, 13 | independent of being zoomed in or out. 14 |

15 |
16 | 17 | 54 | 55 | -------------------------------------------------------------------------------- /examples/timeline/editing/itemsAlwaysDraggable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Timeline | itemsAlwaysDraggable Option 4 | 5 | 6 | 7 | 8 | 9 |

The itemsAlwaysDraggable option allows to drag items around without first selecting them. When itemsAlwaysDraggable.range is set to true, the range can be changed without selection as well.

10 |
11 | 12 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /examples/timeline/interaction/limitMoveAndZoom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Timeline | Limit move and zoom 5 | 6 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

19 | The visible range is limited in this demo: 20 |

21 | 27 |
28 | 29 | 52 | 53 | -------------------------------------------------------------------------------- /examples/timeline/interaction/rollingMode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Timeline | rolling mode Option 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

⛶Timeline rolling mode option

14 | 15 |
16 | 17 | 18 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /examples/timeline/items/backgroundAreas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Timeline | Background areas 5 | 6 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |

This example demonstrates the item type "background", see "Period A" and "Period B". The background areas can be styled with css.

24 | 25 |
26 | 27 | 49 | 50 | -------------------------------------------------------------------------------- /examples/timeline/items/rangeOverflowItem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Timeline | Range overflow 5 | 6 | 7 | 8 | 9 | 18 | 19 | 20 | 21 | 22 |

23 | In case of ranges being spread over a wide range of time, it can be interesting to have the text contents of the ranges overflow the box. This can be achieved by changing the overflow property of the contents to visible with css: 24 |

25 | 
26 | .vis-item .vis-item-overflow {
27 |   overflow: visible;
28 | }
29 |
30 | 31 |
32 | 33 | 53 | 54 | -------------------------------------------------------------------------------- /examples/timeline/other/dataAttributes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Timeline | Basic demo 5 | 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 | In this example all items get an HTML attribute attached: each item gets an attribute data-id, and items 1 and 6 have an additional attribute data-tooltip. 19 |

20 | 21 |
22 | 23 | 43 | 44 | -------------------------------------------------------------------------------- /examples/timeline/other/dataAttributesAll.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Timeline | Basic demo 5 | 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 | In this example all items get HTML attributes attached: each item gets data-? attributes for each field defined on the JS object. 19 |

20 | 21 |
22 | 23 | 43 | 44 | -------------------------------------------------------------------------------- /examples/timeline/other/hidingPeriods.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Timeline | Hiding periods 5 | 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 | It's possible to hide (recurring) periods from the Timeline. The following example hides weekends and nights. 19 |

20 |
21 | 52 | 53 | -------------------------------------------------------------------------------- /examples/timeline/other/horizontalScroll.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Timeline | Horizontal Scroll Option 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Timeline horizontal scroll option

14 | 15 |
16 | 17 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /examples/timeline/other/localization.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Timeline | Localization 5 | 6 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |

20 | To localize the Timeline, one has to load a version of moment.js including locales. To set a locale, specify option {locale: STRING}. 21 |

22 | 23 |

24 | 25 | 31 |

32 | 33 |
34 | 35 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /examples/timeline/other/requirejs/requirejs_example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Timeline require.js demo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

13 | This example shows how to load the vis.js library using require.js. 14 |

15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /examples/timeline/other/requirejs/scripts/main.js: -------------------------------------------------------------------------------- 1 | require.config({ 2 | paths: { 3 | vis: '../../../../../dist/vis' 4 | } 5 | }); 6 | 7 | require(['vis'], function (vis) { 8 | var container = document.getElementById('visualization'); 9 | var data = new vis.DataSet([ 10 | {id: 1, content: 'item 1', start: '2013-04-20'}, 11 | {id: 2, content: 'item 2', start: '2013-04-14'}, 12 | {id: 3, content: 'item 3', start: '2013-04-18'}, 13 | {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'}, 14 | {id: 5, content: 'item 5', start: '2013-04-25'}, 15 | {id: 6, content: 'item 6', start: '2013-04-27'} 16 | ]); 17 | var options = {}; 18 | var timeline = new vis.Timeline(container, data, options); 19 | }); 20 | -------------------------------------------------------------------------------- /examples/timeline/other/rtl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Timeline | RTL example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Timeline RTL support

14 | 15 |

Using dir = "rtl" in any parent node

16 |
17 | 18 |

Using options.rtl = true

19 |
20 | 21 | 50 | 51 | -------------------------------------------------------------------------------- /examples/timeline/other/stressPerformance.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | 9 | Timeline | Stress Performance example 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 65 | 66 | -------------------------------------------------------------------------------- /examples/timeline/resources/data/basic.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "content": "item 1", 5 | "start": "2014-04-20" 6 | }, 7 | { 8 | "id": 2, 9 | "content": "item 2", 10 | "start": "2014-04-14" 11 | }, 12 | { 13 | "id": 3, 14 | "content": "item 3", 15 | "start": "2014-04-18" 16 | }, 17 | { 18 | "id": 4, 19 | "content": "item 4", 20 | "start": "2014-04-16", 21 | "end": "2014-04-19" 22 | }, 23 | { 24 | "id": 5, 25 | "content": "item 5", 26 | "start": "2014-04-25" 27 | }, 28 | { 29 | "id": 6, 30 | "content": "item 6", 31 | "start": "2014-04-27", 32 | "type": "point" 33 | } 34 | ] -------------------------------------------------------------------------------- /examples/timeline/resources/img/Hardware-Mobile-Phone-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/examples/timeline/resources/img/Hardware-Mobile-Phone-icon.png -------------------------------------------------------------------------------- /examples/timeline/resources/img/attachment-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/examples/timeline/resources/img/attachment-icon.png -------------------------------------------------------------------------------- /examples/timeline/resources/img/blog-post-edit-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/examples/timeline/resources/img/blog-post-edit-icon.png -------------------------------------------------------------------------------- /examples/timeline/resources/img/comments-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/examples/timeline/resources/img/comments-icon.png -------------------------------------------------------------------------------- /examples/timeline/resources/img/community-users-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/examples/timeline/resources/img/community-users-icon.png -------------------------------------------------------------------------------- /examples/timeline/resources/img/license.txt: -------------------------------------------------------------------------------- 1 | IMAGE LICENSES 2 | 3 | REFRESH CL 4 | http://www.iconarchive.com/category/system/refresh-cl-icons-by-tpdkdesign.net.html 5 | 6 | License: Free for non-commercial use. 7 | http://www.iconarchive.com/icons/tpdkdesign.net/refresh-cl/readme_eng.txt 8 | 9 | 10 | 11 | AESTHETICA 2 12 | http://www.iconarchive.com/category/application/aesthetica-2-icons-by-dryicons.html 13 | 14 | License: 15 | DryIcons Terms of Use 16 | http://dryicons.com/terms/ 17 | 18 | -------------------------------------------------------------------------------- /examples/timeline/resources/img/license_aesthetica-2.txt: -------------------------------------------------------------------------------- 1 | Aesthetica Icon Set, version 2.0 2 | http://dryicons.com/free-icons/preview/aesthetica-version-2/ 3 | 4 | Information 5 | ---------------------- 6 | 7 | This icon set contains 181 quality icons in the following formats: 8 | Transparent PNG 9 | 16 x 16 px 10 | 24 x 24 px 11 | 32 x 32 px 12 | 48 x 48 px 13 | 128 x 128 px 14 | 15 | 16 | 17 | Licensing 18 | ---------------------- 19 | 20 | The usage of DryIcons' work (icons, icon sets and graphics) is limited to the terms of the "Free License" and "Commercial License" use. 21 | The DryIcons Free License means that you can use our icons, icon sets and graphics in any publicly accesible web site, web application or any form of presentation publicly accessible through the World Wide Web only according to the DryIcons Free License Terms and Conditions: 22 | 23 | * You must put a back link with credits to http://dryicons.com on every page where DryIcons' Works are used (example: Icons by http://dryicons.com); 24 | 25 | * You must include the correct back link to DryIcons website, which is: http://dryicons.com; 26 | 27 | * You must place the link on an easy-to-see, recognizable place, so there is no confusion about the Original Author of the Works (DryIcons); 28 | 29 | * When copying, or paraphrasing description text (or title) on one of the Works, you must make sure there are no spelling mistakes; 30 | 31 | * Do not try to take credit or imply in any way that you and not DryIcons is the Original Author of the Works (icons, icon sets and graphics). 32 | 33 | For a more detailed look at our Free License Agreement, please follow the link: http://dryicons.com/terms/#free-license 34 | 35 | 36 | The DryIcons Commercial License means that you can use our Free Icon Sets and Free Graphics without being obligated to put a back link to DryIcons.com for a certain fee. After you complete yourpayment transaction DryIcons grants you a Commercial License. -------------------------------------------------------------------------------- /examples/timeline/resources/img/license_refresh-cl.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/examples/timeline/resources/img/license_refresh-cl.txt -------------------------------------------------------------------------------- /examples/timeline/resources/img/mail-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/examples/timeline/resources/img/mail-icon.png -------------------------------------------------------------------------------- /examples/timeline/resources/img/notes-edit-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/examples/timeline/resources/img/notes-edit-icon.png -------------------------------------------------------------------------------- /examples/timeline/resources/img/product-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/examples/timeline/resources/img/product-icon.png -------------------------------------------------------------------------------- /examples/timeline/resources/img/truck-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/examples/timeline/resources/img/truck-icon.png -------------------------------------------------------------------------------- /examples/timeline/styling/gridStyling.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Timeline | Grid styling 5 | 6 | 7 | 8 | 9 | 29 | 30 | 31 | 32 |
33 | 34 | 53 | 54 | -------------------------------------------------------------------------------- /index-graph3d.js: -------------------------------------------------------------------------------- 1 | // utils 2 | exports.util = require('./lib/util'); 3 | exports.DOMutil = require('./lib/DOMutil'); 4 | 5 | // data 6 | exports.DataSet = require('./lib/DataSet'); 7 | exports.DataView = require('./lib/DataView'); 8 | exports.Queue = require('./lib/Queue'); 9 | 10 | // Graph3d 11 | exports.Graph3d = require('./lib/graph3d/Graph3d'); 12 | exports.graph3d = { 13 | Camera: require('./lib/graph3d/Camera'), 14 | Filter: require('./lib/graph3d/Filter'), 15 | Point2d: require('./lib/graph3d/Point2d'), 16 | Point3d: require('./lib/graph3d/Point3d'), 17 | Slider: require('./lib/graph3d/Slider'), 18 | StepNumber: require('./lib/graph3d/StepNumber') 19 | }; 20 | 21 | // bundled external libraries 22 | exports.moment = require('./lib/module/moment'); 23 | exports.Hammer = require('./lib/module/hammer'); 24 | exports.keycharm = require('keycharm'); 25 | -------------------------------------------------------------------------------- /index-network.js: -------------------------------------------------------------------------------- 1 | // utils 2 | exports.util = require('./lib/util'); 3 | exports.DOMutil = require('./lib/DOMutil'); 4 | 5 | // data 6 | exports.DataSet = require('./lib/DataSet'); 7 | exports.DataView = require('./lib/DataView'); 8 | exports.Queue = require('./lib/Queue'); 9 | 10 | // Network 11 | exports.Network = require('./lib/network/Network'); 12 | exports.network = { 13 | Images: require('./lib/network/Images'), 14 | dotparser: require('./lib/network/dotparser'), 15 | gephiParser: require('./lib/network/gephiParser'), 16 | allOptions: require('./lib/network/options') 17 | }; 18 | exports.network.convertDot = function (input) {return exports.network.dotparser.DOTToGraph(input)}; 19 | exports.network.convertGephi = function (input,options) {return exports.network.gephiParser.parseGephi(input,options)}; 20 | 21 | // bundled external libraries 22 | exports.moment = require('./lib/module/moment'); 23 | exports.Hammer = require('./lib/module/hammer'); 24 | exports.keycharm = require('keycharm'); -------------------------------------------------------------------------------- /index-timeline-graph2d.js: -------------------------------------------------------------------------------- 1 | // utils 2 | exports.util = require('./lib/util'); 3 | exports.DOMutil = require('./lib/DOMutil'); 4 | 5 | // data 6 | exports.DataSet = require('./lib/DataSet'); 7 | exports.DataView = require('./lib/DataView'); 8 | exports.Queue = require('./lib/Queue'); 9 | 10 | // Timeline 11 | exports.Timeline = require('./lib/timeline/Timeline'); 12 | exports.Graph2d = require('./lib/timeline/Graph2d'); 13 | exports.timeline = { 14 | Core: require('./lib/timeline/Core'), 15 | DateUtil: require('./lib/timeline/DateUtil'), 16 | Range: require('./lib/timeline/Range'), 17 | stack: require('./lib/timeline/Stack'), 18 | TimeStep: require('./lib/timeline/TimeStep'), 19 | 20 | components: { 21 | items: { 22 | Item: require('./lib/timeline/component/item/Item'), 23 | BackgroundItem: require('./lib/timeline/component/item/BackgroundItem'), 24 | BoxItem: require('./lib/timeline/component/item/BoxItem'), 25 | PointItem: require('./lib/timeline/component/item/PointItem'), 26 | RangeItem: require('./lib/timeline/component/item/RangeItem') 27 | }, 28 | 29 | BackgroundGroup: require('./lib/timeline/component/BackgroundGroup'), 30 | Component: require('./lib/timeline/component/Component'), 31 | CurrentTime: require('./lib/timeline/component/CurrentTime'), 32 | CustomTime: require('./lib/timeline/component/CustomTime'), 33 | DataAxis: require('./lib/timeline/component/DataAxis'), 34 | DataScale: require('./lib/timeline/component/DataScale'), 35 | GraphGroup: require('./lib/timeline/component/GraphGroup'), 36 | Group: require('./lib/timeline/component/Group'), 37 | ItemSet: require('./lib/timeline/component/ItemSet'), 38 | Legend: require('./lib/timeline/component/Legend'), 39 | LineGraph: require('./lib/timeline/component/LineGraph'), 40 | TimeAxis: require('./lib/timeline/component/TimeAxis') 41 | } 42 | }; 43 | 44 | // bundled external libraries 45 | exports.moment = require('./lib/module/moment'); 46 | exports.Hammer = require('./lib/module/hammer'); 47 | exports.keycharm = require('keycharm'); 48 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var util = require('./lib/util'); 2 | 3 | // Graph3d 4 | util.extend(exports, require('./index-graph3d')); 5 | 6 | // Timeline & Graph2d 7 | util.extend(exports, require('./index-timeline-graph2d')); 8 | 9 | // Network 10 | util.extend(exports, require('./index-network')); 11 | -------------------------------------------------------------------------------- /lib/graph3d/Point2d.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @prototype Point2d 3 | * @param {number} [x] 4 | * @param {number} [y] 5 | */ 6 | function Point2d (x, y) { 7 | this.x = x !== undefined ? x : 0; 8 | this.y = y !== undefined ? y : 0; 9 | } 10 | 11 | module.exports = Point2d; 12 | -------------------------------------------------------------------------------- /lib/header.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vis.js 3 | * https://github.com/almende/vis 4 | * 5 | * A dynamic, browser-based visualization library. 6 | * 7 | * @version @@version 8 | * @date @@date 9 | * 10 | * @license 11 | * Copyright (C) 2011-2017 Almende B.V, http://almende.com 12 | * 13 | * Vis.js is dual licensed under both 14 | * 15 | * * The Apache 2.0 License 16 | * http://www.apache.org/licenses/LICENSE-2.0 17 | * 18 | * and 19 | * 20 | * * The MIT License 21 | * http://opensource.org/licenses/MIT 22 | * 23 | * Vis.js may be distributed under either license. 24 | */ 25 | 26 | "use strict"; 27 | -------------------------------------------------------------------------------- /lib/module/hammer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Setup a mock hammer.js object, for unit testing. 3 | * 4 | * Inspiration: https://github.com/uber/deck.gl/pull/658 5 | * 6 | * @returns {{on: noop, off: noop, destroy: noop, emit: noop, get: get}} 7 | */ 8 | function hammerMock() { 9 | const noop = () => {}; 10 | 11 | return { 12 | on: noop, 13 | off: noop, 14 | destroy: noop, 15 | emit: noop, 16 | 17 | get: function(m) { //eslint-disable-line no-unused-vars 18 | return { 19 | set: noop 20 | }; 21 | } 22 | }; 23 | } 24 | 25 | 26 | if (typeof window !== 'undefined') { 27 | var propagating = require('propagating-hammerjs'); 28 | var Hammer = window['Hammer'] || require('hammerjs'); 29 | module.exports = propagating(Hammer, { 30 | preventDefault: 'mouse' 31 | }); 32 | } 33 | else { 34 | module.exports = function () { 35 | // hammer.js is only available in a browser, not in node.js. Replacing it with a mock object. 36 | return hammerMock(); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /lib/module/moment.js: -------------------------------------------------------------------------------- 1 | // first check if moment.js is already loaded in the browser window, if so, 2 | // use this instance. Else, load via commonjs. 3 | module.exports = (typeof window !== 'undefined') && window['moment'] || require('moment'); 4 | -------------------------------------------------------------------------------- /lib/network/css/network-navigation.css: -------------------------------------------------------------------------------- 1 | div.vis-network div.vis-navigation div.vis-button { 2 | width:34px; 3 | height:34px; 4 | -moz-border-radius: 17px; 5 | border-radius: 17px; 6 | position:absolute; 7 | display:inline-block; 8 | background-position: 2px 2px; 9 | background-repeat:no-repeat; 10 | cursor: pointer; 11 | -webkit-touch-callout: none; 12 | -webkit-user-select: none; 13 | -khtml-user-select: none; 14 | -moz-user-select: none; 15 | -ms-user-select: none; 16 | user-select: none; 17 | } 18 | 19 | div.vis-network div.vis-navigation div.vis-button:hover { 20 | box-shadow: 0 0 3px 3px rgba(56, 207, 21, 0.30); 21 | } 22 | 23 | div.vis-network div.vis-navigation div.vis-button:active { 24 | box-shadow: 0 0 1px 3px rgba(56, 207, 21, 0.95); 25 | } 26 | 27 | div.vis-network div.vis-navigation div.vis-button.vis-up { 28 | background-image: url("img/network/upArrow.png"); 29 | bottom:50px; 30 | left:55px; 31 | } 32 | div.vis-network div.vis-navigation div.vis-button.vis-down { 33 | background-image: url("img/network/downArrow.png"); 34 | bottom:10px; 35 | left:55px; 36 | } 37 | div.vis-network div.vis-navigation div.vis-button.vis-left { 38 | background-image: url("img/network/leftArrow.png"); 39 | bottom:10px; 40 | left:15px; 41 | } 42 | div.vis-network div.vis-navigation div.vis-button.vis-right { 43 | background-image: url("img/network/rightArrow.png"); 44 | bottom:10px; 45 | left:95px; 46 | } 47 | div.vis-network div.vis-navigation div.vis-button.vis-zoomIn { 48 | background-image: url("img/network/plus.png"); 49 | bottom:10px; 50 | right:15px; 51 | } 52 | div.vis-network div.vis-navigation div.vis-button.vis-zoomOut { 53 | background-image: url("img/network/minus.png"); 54 | bottom:10px; 55 | right:55px; 56 | } 57 | div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends { 58 | background-image: url("img/network/zoomExtends.png"); 59 | bottom:50px; 60 | right:15px; 61 | } -------------------------------------------------------------------------------- /lib/network/img/acceptDeleteIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/lib/network/img/acceptDeleteIcon.png -------------------------------------------------------------------------------- /lib/network/img/addNodeIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/lib/network/img/addNodeIcon.png -------------------------------------------------------------------------------- /lib/network/img/backIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/lib/network/img/backIcon.png -------------------------------------------------------------------------------- /lib/network/img/connectIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/lib/network/img/connectIcon.png -------------------------------------------------------------------------------- /lib/network/img/cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/lib/network/img/cross.png -------------------------------------------------------------------------------- /lib/network/img/cross2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/lib/network/img/cross2.png -------------------------------------------------------------------------------- /lib/network/img/deleteIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/lib/network/img/deleteIcon.png -------------------------------------------------------------------------------- /lib/network/img/downArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/lib/network/img/downArrow.png -------------------------------------------------------------------------------- /lib/network/img/editIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/lib/network/img/editIcon.png -------------------------------------------------------------------------------- /lib/network/img/leftArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/lib/network/img/leftArrow.png -------------------------------------------------------------------------------- /lib/network/img/minus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/lib/network/img/minus.png -------------------------------------------------------------------------------- /lib/network/img/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/lib/network/img/plus.png -------------------------------------------------------------------------------- /lib/network/img/rightArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/lib/network/img/rightArrow.png -------------------------------------------------------------------------------- /lib/network/img/upArrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/lib/network/img/upArrow.png -------------------------------------------------------------------------------- /lib/network/img/zoomExtends.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/lib/network/img/zoomExtends.png -------------------------------------------------------------------------------- /lib/network/modules/components/edges/util/CubicBezierEdgeBase.js: -------------------------------------------------------------------------------- 1 | import BezierEdgeBase from './BezierEdgeBase' 2 | 3 | /** 4 | * A Base Class for all Cubic Bezier Edges. Bezier curves are used to model 5 | * smooth gradual curves in paths between nodes. 6 | * 7 | * @extends BezierEdgeBase 8 | */ 9 | class CubicBezierEdgeBase extends BezierEdgeBase { 10 | /** 11 | * @param {Object} options 12 | * @param {Object} body 13 | * @param {Label} labelModule 14 | */ 15 | constructor(options, body, labelModule) { 16 | super(options, body, labelModule); 17 | } 18 | 19 | /** 20 | * Calculate the distance between a point (x3,y3) and a line segment from 21 | * (x1,y1) to (x2,y2). 22 | * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment 23 | * https://en.wikipedia.org/wiki/B%C3%A9zier_curve 24 | * @param {number} x1 from x 25 | * @param {number} y1 from y 26 | * @param {number} x2 to x 27 | * @param {number} y2 to y 28 | * @param {number} x3 point to check x 29 | * @param {number} y3 point to check y 30 | * @param {Node} via1 31 | * @param {Node} via2 32 | * @returns {number} 33 | * @private 34 | */ 35 | _getDistanceToBezierEdge(x1, y1, x2, y2, x3, y3, via1, via2) { // x3,y3 is the point 36 | let minDistance = 1e9; 37 | let distance; 38 | let i, t, x, y; 39 | let lastX = x1; 40 | let lastY = y1; 41 | let vec = [0,0,0,0] 42 | for (i = 1; i < 10; i++) { 43 | t = 0.1 * i; 44 | vec[0] = Math.pow(1 - t, 3); 45 | vec[1] = 3 * t * Math.pow(1 - t, 2); 46 | vec[2] = 3 * Math.pow(t,2) * (1 - t); 47 | vec[3] = Math.pow(t, 3); 48 | x = vec[0] * x1 + vec[1] * via1.x + vec[2] * via2.x + vec[3] * x2; 49 | y = vec[0] * y1 + vec[1] * via1.y + vec[2] * via2.y + vec[3] * y2; 50 | if (i > 0) { 51 | distance = this._getDistanceToLine(lastX, lastY, x, y, x3, y3); 52 | minDistance = distance < minDistance ? distance : minDistance; 53 | } 54 | lastX = x; 55 | lastY = y; 56 | } 57 | 58 | return minDistance; 59 | } 60 | } 61 | 62 | export default CubicBezierEdgeBase; -------------------------------------------------------------------------------- /lib/network/modules/components/nodes/shapes/Diamond.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import ShapeBase from '../util/ShapeBase' 4 | 5 | /** 6 | * A Diamond Node/Cluster shape. 7 | * 8 | * @extends ShapeBase 9 | */ 10 | class Diamond extends ShapeBase { 11 | /** 12 | * @param {Object} options 13 | * @param {Object} body 14 | * @param {Label} labelModule 15 | */ 16 | constructor(options, body, labelModule) { 17 | super(options, body, labelModule) 18 | } 19 | 20 | /** 21 | * 22 | * @param {CanvasRenderingContext2D} ctx 23 | * @param {number} x width 24 | * @param {number} y height 25 | * @param {boolean} selected 26 | * @param {boolean} hover 27 | * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values 28 | */ 29 | draw(ctx, x, y, selected, hover, values) { 30 | this._drawShape(ctx, 'diamond', 4, x, y, selected, hover, values); 31 | } 32 | 33 | /** 34 | * 35 | * @param {CanvasRenderingContext2D} ctx 36 | * @param {number} angle 37 | * @returns {number} 38 | */ 39 | distanceToBorder(ctx, angle) { 40 | return this._distanceToBorder(ctx,angle); 41 | } 42 | } 43 | 44 | export default Diamond; 45 | -------------------------------------------------------------------------------- /lib/network/modules/components/nodes/shapes/Dot.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import ShapeBase from '../util/ShapeBase' 4 | 5 | /** 6 | * A Dot Node/Cluster shape. 7 | * 8 | * @extends ShapeBase 9 | */ 10 | class Dot extends ShapeBase { 11 | /** 12 | * @param {Object} options 13 | * @param {Object} body 14 | * @param {Label} labelModule 15 | */ 16 | constructor(options, body, labelModule) { 17 | super(options, body, labelModule) 18 | } 19 | 20 | /** 21 | * 22 | * @param {CanvasRenderingContext2D} ctx 23 | * @param {number} x width 24 | * @param {number} y height 25 | * @param {boolean} selected 26 | * @param {boolean} hover 27 | * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values 28 | */ 29 | draw(ctx, x, y, selected, hover, values) { 30 | this._drawShape(ctx, 'circle', 2, x, y, selected, hover, values); 31 | } 32 | 33 | /** 34 | * 35 | * @param {CanvasRenderingContext2D} ctx 36 | * @param {number} angle 37 | * @returns {number} 38 | */ 39 | distanceToBorder(ctx, angle) { // eslint-disable-line no-unused-vars 40 | this.resize(ctx); 41 | return this.options.size; 42 | } 43 | } 44 | 45 | export default Dot; 46 | -------------------------------------------------------------------------------- /lib/network/modules/components/nodes/shapes/Hexagon.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import ShapeBase from '../util/ShapeBase' 4 | 5 | /** 6 | * A Hexagon Node/Cluster shape. 7 | * 8 | * @extends ShapeBase 9 | */ 10 | class Hexagon extends ShapeBase { 11 | /** 12 | * @param {Object} options 13 | * @param {Object} body 14 | * @param {Label} labelModule 15 | */ 16 | constructor(options, body, labelModule) { 17 | super(options, body, labelModule) 18 | } 19 | 20 | /** 21 | * 22 | * @param {CanvasRenderingContext2D} ctx 23 | * @param {number} x width 24 | * @param {number} y height 25 | * @param {boolean} selected 26 | * @param {boolean} hover 27 | * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values 28 | */ 29 | draw(ctx, x, y, selected, hover, values) { 30 | this._drawShape(ctx, 'hexagon', 4, x, y, selected, hover, values); 31 | } 32 | 33 | /** 34 | * 35 | * @param {CanvasRenderingContext2D} ctx 36 | * @param {number} angle 37 | * @returns {number} 38 | */ 39 | distanceToBorder(ctx, angle) { 40 | return this._distanceToBorder(ctx,angle); 41 | } 42 | } 43 | 44 | export default Hexagon; -------------------------------------------------------------------------------- /lib/network/modules/components/nodes/shapes/Square.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import ShapeBase from '../util/ShapeBase' 4 | 5 | /** 6 | * A Square Node/Cluster shape. 7 | * 8 | * @extends ShapeBase 9 | */ 10 | class Square extends ShapeBase { 11 | /** 12 | * @param {Object} options 13 | * @param {Object} body 14 | * @param {Label} labelModule 15 | */ 16 | constructor(options, body, labelModule) { 17 | super(options, body, labelModule) 18 | } 19 | 20 | /** 21 | * 22 | * @param {CanvasRenderingContext2D} ctx 23 | * @param {number} x width 24 | * @param {number} y height 25 | * @param {boolean} selected 26 | * @param {boolean} hover 27 | * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values 28 | */ 29 | draw(ctx, x, y, selected, hover, values) { 30 | this._drawShape(ctx, 'square', 2, x, y, selected, hover, values); 31 | } 32 | 33 | /** 34 | * 35 | * @param {CanvasRenderingContext2D} ctx 36 | * @param {number} angle 37 | * @returns {number} 38 | */ 39 | distanceToBorder(ctx, angle) { 40 | return this._distanceToBorder(ctx,angle); 41 | } 42 | } 43 | 44 | export default Square; 45 | -------------------------------------------------------------------------------- /lib/network/modules/components/nodes/shapes/Star.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import ShapeBase from '../util/ShapeBase' 4 | 5 | /** 6 | * A Star Node/Cluster shape. 7 | * 8 | * @extends ShapeBase 9 | */ 10 | class Star extends ShapeBase { 11 | /** 12 | * @param {Object} options 13 | * @param {Object} body 14 | * @param {Label} labelModule 15 | */ 16 | constructor(options, body, labelModule) { 17 | super(options, body, labelModule) 18 | } 19 | 20 | /** 21 | * 22 | * @param {CanvasRenderingContext2D} ctx 23 | * @param {number} x width 24 | * @param {number} y height 25 | * @param {boolean} selected 26 | * @param {boolean} hover 27 | * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values 28 | */ 29 | draw(ctx, x, y, selected, hover, values) { 30 | this._drawShape(ctx, 'star', 4, x, y, selected, hover, values); 31 | } 32 | 33 | /** 34 | * 35 | * @param {CanvasRenderingContext2D} ctx 36 | * @param {number} angle 37 | * @returns {number} 38 | */ 39 | distanceToBorder(ctx, angle) { 40 | return this._distanceToBorder(ctx,angle); 41 | } 42 | } 43 | 44 | export default Star; 45 | -------------------------------------------------------------------------------- /lib/network/modules/components/nodes/shapes/Triangle.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import ShapeBase from '../util/ShapeBase' 4 | 5 | /** 6 | * A Triangle Node/Cluster shape. 7 | * 8 | * @extends ShapeBase 9 | */ 10 | class Triangle extends ShapeBase { 11 | /** 12 | * @param {Object} options 13 | * @param {Object} body 14 | * @param {Label} labelModule 15 | */ 16 | constructor(options, body, labelModule) { 17 | super(options, body, labelModule) 18 | } 19 | 20 | /** 21 | * 22 | * @param {CanvasRenderingContext2D} ctx 23 | * @param {number} x 24 | * @param {number} y 25 | * @param {boolean} selected 26 | * @param {boolean} hover 27 | * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values 28 | */ 29 | draw(ctx, x, y, selected, hover, values) { 30 | this._drawShape(ctx, 'triangle', 3, x, y, selected, hover, values); 31 | } 32 | 33 | /** 34 | * 35 | * @param {CanvasRenderingContext2D} ctx 36 | * @param {number} angle 37 | * @returns {number} 38 | */ 39 | distanceToBorder(ctx, angle) { 40 | return this._distanceToBorder(ctx,angle); 41 | } 42 | } 43 | 44 | export default Triangle; 45 | -------------------------------------------------------------------------------- /lib/network/modules/components/nodes/shapes/TriangleDown.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import ShapeBase from '../util/ShapeBase' 4 | 5 | /** 6 | * A downward facing Triangle Node/Cluster shape. 7 | * 8 | * @extends ShapeBase 9 | */ 10 | class TriangleDown extends ShapeBase { 11 | /** 12 | * @param {Object} options 13 | * @param {Object} body 14 | * @param {Label} labelModule 15 | */ 16 | constructor(options, body, labelModule) { 17 | super(options, body, labelModule) 18 | } 19 | 20 | /** 21 | * 22 | * @param {CanvasRenderingContext2D} ctx 23 | * @param {number} x 24 | * @param {number} y 25 | * @param {boolean} selected 26 | * @param {boolean} hover 27 | * @param {{toArrow: boolean, toArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), toArrowType: *, middleArrow: boolean, middleArrowScale: (number|allOptions.edges.arrows.middle.scaleFactor|{number}|Array), middleArrowType: (allOptions.edges.arrows.middle.type|{string}|string|*), fromArrow: boolean, fromArrowScale: (allOptions.edges.arrows.to.scaleFactor|{number}|allOptions.edges.arrows.middle.scaleFactor|allOptions.edges.arrows.from.scaleFactor|Array|number), fromArrowType: *, arrowStrikethrough: (*|boolean|allOptions.edges.arrowStrikethrough|{boolean}), color: undefined, inheritsColor: (string|string|string|allOptions.edges.color.inherit|{string, boolean}|Array|*), opacity: *, hidden: *, length: *, shadow: *, shadowColor: *, shadowSize: *, shadowX: *, shadowY: *, dashes: (*|boolean|Array|allOptions.edges.dashes|{boolean, array}), width: *}} values 28 | */ 29 | draw(ctx, x, y, selected, hover, values) { 30 | this._drawShape(ctx, 'triangleDown', 3, x, y, selected, hover, values); 31 | } 32 | 33 | /** 34 | * 35 | * @param {CanvasRenderingContext2D} ctx 36 | * @param {number} angle 37 | * @returns {number} 38 | */ 39 | distanceToBorder(ctx, angle) { 40 | return this._distanceToBorder(ctx,angle); 41 | } 42 | } 43 | 44 | export default TriangleDown; 45 | -------------------------------------------------------------------------------- /lib/network/modules/components/physics/CentralGravitySolver.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Central Gravity Solver 3 | */ 4 | class CentralGravitySolver { 5 | /** 6 | * @param {Object} body 7 | * @param {{physicsNodeIndices: Array, physicsEdgeIndices: Array, forces: {}, velocities: {}}} physicsBody 8 | * @param {Object} options 9 | */ 10 | constructor(body, physicsBody, options) { 11 | this.body = body; 12 | this.physicsBody = physicsBody; 13 | this.setOptions(options); 14 | } 15 | 16 | /** 17 | * 18 | * @param {Object} options 19 | */ 20 | setOptions(options) { 21 | this.options = options; 22 | } 23 | 24 | /** 25 | * Calculates forces for each node 26 | */ 27 | solve() { 28 | let dx, dy, distance, node; 29 | let nodes = this.body.nodes; 30 | let nodeIndices = this.physicsBody.physicsNodeIndices; 31 | let forces = this.physicsBody.forces; 32 | 33 | for (let i = 0; i < nodeIndices.length; i++) { 34 | let nodeId = nodeIndices[i]; 35 | node = nodes[nodeId]; 36 | dx = -node.x; 37 | dy = -node.y; 38 | distance = Math.sqrt(dx * dx + dy * dy); 39 | 40 | this._calculateForces(distance, dx, dy, forces, node); 41 | } 42 | } 43 | 44 | /** 45 | * Calculate the forces based on the distance. 46 | * @param {number} distance 47 | * @param {number} dx 48 | * @param {number} dy 49 | * @param {Object} forces 50 | * @param {Node} node 51 | * @private 52 | */ 53 | _calculateForces(distance, dx, dy, forces, node) { 54 | let gravityForce = (distance === 0) ? 0 : (this.options.centralGravity / distance); 55 | forces[node.id].x = dx * gravityForce; 56 | forces[node.id].y = dy * gravityForce; 57 | } 58 | } 59 | 60 | 61 | export default CentralGravitySolver; -------------------------------------------------------------------------------- /lib/network/modules/components/physics/FA2BasedCentralGravitySolver.js: -------------------------------------------------------------------------------- 1 | import CentralGravitySolver from "./CentralGravitySolver" 2 | 3 | /** 4 | * @extends CentralGravitySolver 5 | */ 6 | class ForceAtlas2BasedCentralGravitySolver extends CentralGravitySolver { 7 | /** 8 | * @param {Object} body 9 | * @param {{physicsNodeIndices: Array, physicsEdgeIndices: Array, forces: {}, velocities: {}}} physicsBody 10 | * @param {Object} options 11 | */ 12 | constructor(body, physicsBody, options) { 13 | super(body, physicsBody, options); 14 | } 15 | 16 | 17 | /** 18 | * Calculate the forces based on the distance. 19 | * 20 | * @param {number} distance 21 | * @param {number} dx 22 | * @param {number} dy 23 | * @param {Object} forces 24 | * @param {Node} node 25 | * @private 26 | */ 27 | _calculateForces(distance, dx, dy, forces, node) { 28 | if (distance > 0) { 29 | let degree = (node.edges.length + 1); 30 | let gravityForce = this.options.centralGravity * degree * node.options.mass; 31 | forces[node.id].x = dx * gravityForce; 32 | forces[node.id].y = dy * gravityForce; 33 | } 34 | } 35 | } 36 | 37 | export default ForceAtlas2BasedCentralGravitySolver; -------------------------------------------------------------------------------- /lib/network/modules/components/physics/FA2BasedRepulsionSolver.js: -------------------------------------------------------------------------------- 1 | import BarnesHutSolver from "./BarnesHutSolver" 2 | 3 | /** 4 | * @extends BarnesHutSolver 5 | */ 6 | class ForceAtlas2BasedRepulsionSolver extends BarnesHutSolver { 7 | /** 8 | * @param {Object} body 9 | * @param {{physicsNodeIndices: Array, physicsEdgeIndices: Array, forces: {}, velocities: {}}} physicsBody 10 | * @param {Object} options 11 | */ 12 | constructor(body, physicsBody, options) { 13 | super(body, physicsBody, options); 14 | } 15 | 16 | /** 17 | * Calculate the forces based on the distance. 18 | * 19 | * @param {number} distance 20 | * @param {number} dx 21 | * @param {number} dy 22 | * @param {Node} node 23 | * @param {Object} parentBranch 24 | * @private 25 | */ 26 | _calculateForces(distance, dx, dy, node, parentBranch) { 27 | if (distance === 0) { 28 | distance = 0.1 * Math.random(); 29 | dx = distance; 30 | } 31 | 32 | if (this.overlapAvoidanceFactor < 1 && node.shape.radius) { 33 | distance = Math.max(0.1 + (this.overlapAvoidanceFactor * node.shape.radius), distance - node.shape.radius); 34 | } 35 | 36 | let degree = (node.edges.length + 1); 37 | // the dividing by the distance cubed instead of squared allows us to get the fx and fy components without sines and cosines 38 | // it is shorthand for gravityforce with distance squared and fx = dx/distance * gravityForce 39 | let gravityForce = this.options.gravitationalConstant * parentBranch.mass * node.options.mass * degree / Math.pow(distance,2); 40 | let fx = dx * gravityForce; 41 | let fy = dy * gravityForce; 42 | 43 | this.physicsBody.forces[node.id].x += fx; 44 | this.physicsBody.forces[node.id].y += fy; 45 | } 46 | } 47 | 48 | export default ForceAtlas2BasedRepulsionSolver; 49 | -------------------------------------------------------------------------------- /lib/shared/activator.css: -------------------------------------------------------------------------------- 1 | .vis .overlay { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 100%; 7 | 8 | /* Must be displayed above for example selected Timeline items */ 9 | z-index: 10; 10 | } 11 | 12 | .vis-active { 13 | box-shadow: 0 0 10px #86d5f8; 14 | } 15 | -------------------------------------------------------------------------------- /lib/shared/bootstrap.css: -------------------------------------------------------------------------------- 1 | /* override some bootstrap styles screwing up the timelines css */ 2 | 3 | .vis [class*="span"] { 4 | min-height: 0; 5 | width: auto; 6 | } 7 | -------------------------------------------------------------------------------- /lib/shared/tooltip.css: -------------------------------------------------------------------------------- 1 | div.vis-tooltip { 2 | position: absolute; 3 | visibility: hidden; 4 | padding: 5px; 5 | white-space: nowrap; 6 | 7 | font-family: verdana; 8 | font-size:14px; 9 | color:#000000; 10 | background-color: #f5f4ed; 11 | 12 | -moz-border-radius: 3px; 13 | -webkit-border-radius: 3px; 14 | border-radius: 3px; 15 | border: 1px solid #808074; 16 | 17 | box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); 18 | pointer-events: none; 19 | 20 | z-index: 5; 21 | } 22 | -------------------------------------------------------------------------------- /lib/timeline/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "node": true, 6 | "mocha": true 7 | }, 8 | 9 | "parserOptions": { 10 | "sourceType": "module", 11 | }, 12 | 13 | "extends": "eslint:recommended", 14 | 15 | // For the full list of rules, see: http://eslint.org/docs/rules/ 16 | "rules": { 17 | "complexity": [2, 55], 18 | "max-statements": [2, 115], 19 | "no-unreachable": 1, 20 | "no-useless-escape": 0, 21 | "no-console": 0, 22 | "require-jsdoc": ["error", { 23 | "require": { 24 | "FunctionDeclaration": true, 25 | "MethodDefinition": true, 26 | "ClassDeclaration": true, 27 | "ArrowFunctionExpression": true 28 | } 29 | }], 30 | "valid-jsdoc": [2, { 31 | "requireReturnDescription": false, 32 | "requireReturn": false, 33 | "requireParamDescription": false, 34 | "requireReturnType": true 35 | }], 36 | } 37 | // To flag presence of console.log without breaking linting: 38 | //"no-console": ["warn", { allow: ["warn", "error"] }], 39 | } 40 | -------------------------------------------------------------------------------- /lib/timeline/component/BackgroundGroup.js: -------------------------------------------------------------------------------- 1 | var Group = require('./Group'); 2 | 3 | /** 4 | * @constructor BackgroundGroup 5 | * @param {number | string} groupId 6 | * @param {Object} data 7 | * @param {ItemSet} itemSet 8 | * @extends Group 9 | */ 10 | function BackgroundGroup (groupId, data, itemSet) { 11 | Group.call(this, groupId, data, itemSet); 12 | 13 | this.width = 0; 14 | this.height = 0; 15 | this.top = 0; 16 | this.left = 0; 17 | } 18 | 19 | BackgroundGroup.prototype = Object.create(Group.prototype); 20 | 21 | /** 22 | * Repaint this group 23 | * @param {{start: number, end: number}} range 24 | * @param {{item: {horizontal: number, vertical: number}, axis: number}} margin 25 | * @param {boolean} [forceRestack=false] Force restacking of all items 26 | * @return {boolean} Returns true if the group is resized 27 | */ 28 | BackgroundGroup.prototype.redraw = function(range, margin, forceRestack) { // eslint-disable-line no-unused-vars 29 | var resized = false; 30 | 31 | this.visibleItems = this._updateItemsInRange(this.orderedItems, this.visibleItems, range); 32 | 33 | // calculate actual size 34 | this.width = this.dom.background.offsetWidth; 35 | 36 | // apply new height (just always zero for BackgroundGroup 37 | this.dom.background.style.height = '0'; 38 | 39 | // update vertical position of items after they are re-stacked and the height of the group is calculated 40 | for (var i = 0, ii = this.visibleItems.length; i < ii; i++) { 41 | var item = this.visibleItems[i]; 42 | item.repositionY(margin); 43 | } 44 | 45 | return resized; 46 | }; 47 | 48 | /** 49 | * Show this group: attach to the DOM 50 | */ 51 | BackgroundGroup.prototype.show = function() { 52 | if (!this.dom.background.parentNode) { 53 | this.itemSet.dom.background.appendChild(this.dom.background); 54 | } 55 | }; 56 | 57 | module.exports = BackgroundGroup; 58 | -------------------------------------------------------------------------------- /lib/timeline/component/Component.js: -------------------------------------------------------------------------------- 1 | var util = require('../../util'); 2 | 3 | /** 4 | * Prototype for visual components 5 | * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} [body] 6 | * @param {Object} [options] 7 | */ 8 | function Component (body, options) { // eslint-disable-line no-unused-vars 9 | this.options = null; 10 | this.props = null; 11 | } 12 | 13 | /** 14 | * Set options for the component. The new options will be merged into the 15 | * current options. 16 | * @param {Object} options 17 | */ 18 | Component.prototype.setOptions = function(options) { 19 | if (options) { 20 | util.extend(this.options, options); 21 | } 22 | }; 23 | 24 | /** 25 | * Repaint the component 26 | * @return {boolean} Returns true if the component is resized 27 | */ 28 | Component.prototype.redraw = function() { 29 | // should be implemented by the component 30 | return false; 31 | }; 32 | 33 | /** 34 | * Destroy the component. Cleanup DOM and event listeners 35 | */ 36 | Component.prototype.destroy = function() { 37 | // should be implemented by the component 38 | }; 39 | 40 | /** 41 | * Test whether the component is resized since the last time _isResized() was 42 | * called. 43 | * @return {Boolean} Returns true if the component is resized 44 | * @protected 45 | */ 46 | Component.prototype._isResized = function() { 47 | var resized = (this.props._previousWidth !== this.props.width || 48 | this.props._previousHeight !== this.props.height); 49 | 50 | this.props._previousWidth = this.props.width; 51 | this.props._previousHeight = this.props.height; 52 | 53 | return resized; 54 | }; 55 | 56 | module.exports = Component; 57 | -------------------------------------------------------------------------------- /lib/timeline/component/css/animation.css: -------------------------------------------------------------------------------- 1 | .vis-timeline { 2 | /* 3 | -webkit-transition: height .4s ease-in-out; 4 | transition: height .4s ease-in-out; 5 | */ 6 | } 7 | 8 | .vis-panel { 9 | /* 10 | -webkit-transition: height .4s ease-in-out, top .4s ease-in-out; 11 | transition: height .4s ease-in-out, top .4s ease-in-out; 12 | */ 13 | } 14 | 15 | .vis-axis { 16 | /* 17 | -webkit-transition: top .4s ease-in-out; 18 | transition: top .4s ease-in-out; 19 | */ 20 | } 21 | 22 | /* TODO: get animation working nicely 23 | 24 | .vis-item { 25 | -webkit-transition: top .4s ease-in-out; 26 | transition: top .4s ease-in-out; 27 | } 28 | 29 | .vis-item.line { 30 | -webkit-transition: height .4s ease-in-out, top .4s ease-in-out; 31 | transition: height .4s ease-in-out, top .4s ease-in-out; 32 | } 33 | /**/ -------------------------------------------------------------------------------- /lib/timeline/component/css/currenttime.css: -------------------------------------------------------------------------------- 1 | .vis-current-time { 2 | background-color: #FF7F6E; 3 | width: 2px; 4 | z-index: 1; 5 | pointer-events: none; 6 | } 7 | 8 | .vis-rolling-mode-btn { 9 | height: 40px; 10 | width: 40px; 11 | position: absolute; 12 | top: 7px; 13 | right: 20px; 14 | border-radius: 50%; 15 | font-size: 28px; 16 | cursor: pointer; 17 | opacity: 0.8; 18 | color: white; 19 | font-weight: bold; 20 | text-align: center; 21 | background: #3876c2; 22 | } 23 | .vis-rolling-mode-btn:before { 24 | content: "\26F6"; 25 | } 26 | 27 | .vis-rolling-mode-btn:hover { 28 | opacity: 1; 29 | } -------------------------------------------------------------------------------- /lib/timeline/component/css/customtime.css: -------------------------------------------------------------------------------- 1 | .vis-custom-time { 2 | background-color: #6E94FF; 3 | width: 2px; 4 | cursor: move; 5 | z-index: 1; 6 | } -------------------------------------------------------------------------------- /lib/timeline/component/css/itemset.css: -------------------------------------------------------------------------------- 1 | 2 | .vis-itemset { 3 | position: relative; 4 | padding: 0; 5 | margin: 0; 6 | 7 | box-sizing: border-box; 8 | } 9 | 10 | .vis-itemset .vis-background, 11 | .vis-itemset .vis-foreground { 12 | position: absolute; 13 | width: 100%; 14 | height: 100%; 15 | overflow: visible; 16 | } 17 | 18 | .vis-axis { 19 | position: absolute; 20 | width: 100%; 21 | height: 0; 22 | left: 0; 23 | z-index: 1; 24 | } 25 | 26 | .vis-foreground .vis-group { 27 | position: relative; 28 | box-sizing: border-box; 29 | border-bottom: 1px solid #bfbfbf; 30 | } 31 | 32 | .vis-foreground .vis-group:last-child { 33 | border-bottom: none; 34 | } 35 | 36 | .vis-nesting-group { 37 | cursor: pointer; 38 | } 39 | 40 | .vis-nested-group { 41 | background: #f5f5f5; 42 | } 43 | 44 | .vis-label.vis-nesting-group.expanded:before { 45 | content: "\25BC"; 46 | } 47 | 48 | .vis-label.vis-nesting-group.collapsed-rtl:before { 49 | content: "\25C0"; 50 | } 51 | 52 | .vis-label.vis-nesting-group.collapsed:before { 53 | content: "\25B6"; 54 | } 55 | 56 | .vis-overlay { 57 | position: absolute; 58 | top: 0; 59 | left: 0; 60 | width: 100%; 61 | height: 100%; 62 | z-index: 10; 63 | } -------------------------------------------------------------------------------- /lib/timeline/component/css/labelset.css: -------------------------------------------------------------------------------- 1 | 2 | .vis-labelset { 3 | position: relative; 4 | 5 | overflow: hidden; 6 | 7 | box-sizing: border-box; 8 | } 9 | 10 | .vis-labelset .vis-label { 11 | position: relative; 12 | left: 0; 13 | top: 0; 14 | width: 100%; 15 | color: #4d4d4d; 16 | 17 | box-sizing: border-box; 18 | } 19 | 20 | .vis-labelset .vis-label { 21 | border-bottom: 1px solid #bfbfbf; 22 | } 23 | 24 | .vis-labelset .vis-label.draggable { 25 | cursor: pointer; 26 | } 27 | 28 | .vis-labelset .vis-label:last-child { 29 | border-bottom: none; 30 | } 31 | 32 | .vis-labelset .vis-label .vis-inner { 33 | display: inline-block; 34 | padding: 5px; 35 | } 36 | 37 | .vis-labelset .vis-label .vis-inner.vis-hidden { 38 | padding: 0; 39 | } 40 | -------------------------------------------------------------------------------- /lib/timeline/component/css/panel.css: -------------------------------------------------------------------------------- 1 | .vis-panel { 2 | position: absolute; 3 | 4 | padding: 0; 5 | margin: 0; 6 | 7 | box-sizing: border-box; 8 | } 9 | 10 | .vis-panel.vis-center, 11 | .vis-panel.vis-left, 12 | .vis-panel.vis-right, 13 | .vis-panel.vis-top, 14 | .vis-panel.vis-bottom { 15 | border: 1px #bfbfbf; 16 | } 17 | 18 | .vis-panel.vis-center, 19 | .vis-panel.vis-left, 20 | .vis-panel.vis-right { 21 | border-top-style: solid; 22 | border-bottom-style: solid; 23 | overflow: hidden; 24 | } 25 | 26 | .vis-left.vis-panel.vis-vertical-scroll, .vis-right.vis-panel.vis-vertical-scroll { 27 | height: 100%; 28 | overflow-x: hidden; 29 | overflow-y: scroll; 30 | } 31 | 32 | .vis-left.vis-panel.vis-vertical-scroll { 33 | direction: rtl; 34 | } 35 | 36 | .vis-left.vis-panel.vis-vertical-scroll .vis-content { 37 | direction: ltr; 38 | } 39 | 40 | .vis-right.vis-panel.vis-vertical-scroll { 41 | direction: ltr; 42 | } 43 | 44 | .vis-right.vis-panel.vis-vertical-scroll .vis-content { 45 | direction: rtl; 46 | } 47 | 48 | .vis-panel.vis-center, 49 | .vis-panel.vis-top, 50 | .vis-panel.vis-bottom { 51 | border-left-style: solid; 52 | border-right-style: solid; 53 | } 54 | 55 | .vis-background { 56 | overflow: hidden; 57 | } 58 | 59 | .vis-panel > .vis-content { 60 | position: relative; 61 | } 62 | 63 | .vis-panel .vis-shadow { 64 | position: absolute; 65 | width: 100%; 66 | height: 1px; 67 | box-shadow: 0 0 10px rgba(0,0,0,0.8); 68 | /* TODO: find a nice way to ensure vis-shadows are drawn on top of items 69 | z-index: 1; 70 | */ 71 | } 72 | 73 | .vis-panel .vis-shadow.vis-top { 74 | top: -1px; 75 | left: 0; 76 | } 77 | 78 | .vis-panel .vis-shadow.vis-bottom { 79 | bottom: -1px; 80 | left: 0; 81 | } -------------------------------------------------------------------------------- /lib/timeline/component/css/timeaxis.css: -------------------------------------------------------------------------------- 1 | .vis-time-axis { 2 | position: relative; 3 | overflow: hidden; 4 | } 5 | 6 | .vis-time-axis.vis-foreground { 7 | top: 0; 8 | left: 0; 9 | width: 100%; 10 | } 11 | 12 | .vis-time-axis.vis-background { 13 | position: absolute; 14 | top: 0; 15 | left: 0; 16 | width: 100%; 17 | height: 100%; 18 | } 19 | 20 | .vis-time-axis .vis-text { 21 | position: absolute; 22 | color: #4d4d4d; 23 | padding: 3px; 24 | overflow: hidden; 25 | box-sizing: border-box; 26 | 27 | white-space: nowrap; 28 | } 29 | 30 | .vis-time-axis .vis-text.vis-measure { 31 | position: absolute; 32 | padding-left: 0; 33 | padding-right: 0; 34 | margin-left: 0; 35 | margin-right: 0; 36 | visibility: hidden; 37 | } 38 | 39 | .vis-time-axis .vis-grid.vis-vertical { 40 | position: absolute; 41 | border-left: 1px solid; 42 | } 43 | 44 | .vis-time-axis .vis-grid.vis-vertical-rtl { 45 | position: absolute; 46 | border-right: 1px solid; 47 | } 48 | 49 | .vis-time-axis .vis-grid.vis-minor { 50 | border-color: #e5e5e5; 51 | } 52 | 53 | .vis-time-axis .vis-grid.vis-major { 54 | border-color: #bfbfbf; 55 | } 56 | -------------------------------------------------------------------------------- /lib/timeline/component/css/timeline.css: -------------------------------------------------------------------------------- 1 | 2 | .vis-timeline { 3 | position: relative; 4 | border: 1px solid #bfbfbf; 5 | 6 | overflow: hidden; 7 | padding: 0; 8 | margin: 0; 9 | 10 | box-sizing: border-box; 11 | } 12 | -------------------------------------------------------------------------------- /lib/timeline/locales.js: -------------------------------------------------------------------------------- 1 | // English 2 | exports['en'] = { 3 | current: 'current', 4 | time: 'time' 5 | }; 6 | exports['en_EN'] = exports['en']; 7 | exports['en_US'] = exports['en']; 8 | 9 | // Italiano 10 | exports['it'] = { 11 | current: 'attuale', 12 | time: 'tempo' 13 | }; 14 | exports['it_IT'] = exports['it']; 15 | exports['it_CH'] = exports['it']; 16 | 17 | // Dutch 18 | exports['nl'] = { 19 | current: 'huidige', 20 | time: 'tijd' 21 | }; 22 | exports['nl_NL'] = exports['nl']; 23 | exports['nl_BE'] = exports['nl']; 24 | 25 | // German 26 | exports['de'] = { 27 | current: 'Aktuelle', 28 | time: 'Zeit' 29 | }; 30 | exports['de_DE'] = exports['de']; 31 | 32 | // French 33 | exports['fr'] = { 34 | current: 'actuel', 35 | time: 'heure' 36 | }; 37 | exports['fr_FR'] = exports['fr']; 38 | exports['fr_CA'] = exports['fr']; 39 | exports['fr_BE'] = exports['fr']; 40 | 41 | // Espanol 42 | exports['es'] = { 43 | current: 'corriente', 44 | time: 'hora' 45 | }; 46 | exports['es_ES'] = exports['es']; 47 | -------------------------------------------------------------------------------- /misc/how_to_help.md: -------------------------------------------------------------------------------- 1 | # How to help! 2 | 3 | This project is no longer in active development. See #4259 for details. 4 | 5 | Please consider contributing to the [visjs community](https://github.com/visjs)! -------------------------------------------------------------------------------- /misc/we_need_help.md: -------------------------------------------------------------------------------- 1 | # We need help! 2 | 3 | This project is no longer in active development. See #4259 for details. 4 | 5 | Please consider contributing to the [visjs community](https://github.com/visjs)! -------------------------------------------------------------------------------- /misc/we_need_help.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/almende/vis/0b2a54a1684b3f15b4dd280cfbc68295d8edb48a/misc/we_need_help.png -------------------------------------------------------------------------------- /test/TestSupport.js: -------------------------------------------------------------------------------- 1 | var vis = require('../dist/vis'); 2 | var DataSet = vis.DataSet; 3 | 4 | module.exports = { 5 | buildMockItemSet: function() { 6 | var itemset = { 7 | dom: { 8 | foreground: document.createElement('div'), 9 | content: document.createElement('div') 10 | }, 11 | itemSet: { 12 | itemsData: new DataSet() 13 | } 14 | }; 15 | return itemset; 16 | }, 17 | 18 | buildSimpleTimelineRangeBody: function () { 19 | var body = { 20 | dom: { 21 | center: { 22 | clientWidth: 1000 23 | } 24 | }, 25 | domProps: { 26 | centerContainer: { 27 | width: 900, 28 | height: 600 29 | } 30 | }, 31 | emitter: { 32 | on: function () {}, 33 | off: function () {}, 34 | emit: function () {} 35 | }, 36 | hiddenDates: [], 37 | util: {} 38 | } 39 | body.dom.rollingModeBtn = document.createElement('div') 40 | return body 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /test/TimelineRange.test.js: -------------------------------------------------------------------------------- 1 | var assert = require('assert'); 2 | var vis = require('../dist/vis'); 3 | var jsdom = require('mocha-jsdom') 4 | var moment = vis.moment; 5 | var timeline = vis.timeline; 6 | var Range = timeline.Range; 7 | var TestSupport = require('./TestSupport'); 8 | 9 | describe('Timeline Range', function () { 10 | 11 | jsdom(); 12 | 13 | it('should have start default before now', function () { 14 | var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0).valueOf(); 15 | var range = new Range(TestSupport.buildSimpleTimelineRangeBody()); 16 | assert(range.start < now, "Default start is before now"); 17 | }); 18 | 19 | it('should have end default after now', function () { 20 | var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0).valueOf(); 21 | var range = new Range(TestSupport.buildSimpleTimelineRangeBody()); 22 | assert(range.end > now, "Default end is after now"); 23 | }); 24 | 25 | it('should support custom start and end dates', function () { 26 | var range = new Range(TestSupport.buildSimpleTimelineRangeBody()); 27 | range.setRange(new Date(2017, 0, 26, 13, 26, 3, 320), new Date(2017, 3, 11, 0, 23, 35, 0), false, false, null); 28 | assert.equal(range.start, new Date(2017, 0, 26, 13, 26, 3, 320).valueOf(), "start is as expected"); 29 | assert.equal(range.end, new Date(2017, 3, 11, 0, 23, 35, 0).valueOf(), "end is as expected"); 30 | }); 31 | 32 | it('should calculate milliseconds per pixel', function () { 33 | var range = new Range(TestSupport.buildSimpleTimelineRangeBody()); 34 | assert(range.getMillisecondsPerPixel() > 0, "positive value for milliseconds per pixel"); 35 | }); 36 | 37 | it('should calculate 1 millisecond per pixel for simple range', function () { 38 | var range = new Range(TestSupport.buildSimpleTimelineRangeBody()); 39 | range.setRange(new Date(2017, 0, 26, 13, 26, 3, 320), new Date(2017, 0, 26, 13, 26, 4, 320), false, false, null); 40 | assert.equal(range.getMillisecondsPerPixel(), 1, "one second over 1000 pixels"); 41 | }); 42 | }); -------------------------------------------------------------------------------- /test/dot.txt: -------------------------------------------------------------------------------- 1 | digraph test_graph { 2 | # this test file tries to test everything from the DOT language 3 | rankdir=LR; 4 | size="8,5" 5 | font = "arial" 6 | graph[attr1="another"" attr"] 7 | node [shape = doublecircle]; node1 node2 node3; 8 | node [shape = circle]; 9 | edge[length=170 fontSize=12] 10 | node4[color=red shape=diamond] 11 | node5[color="blue", shape=square, width=3] 12 | 13 | /* 14 | some block comment 15 | */ 16 | "node1" -> node1 [ label = "a" ]; 17 | "node2" -> node3 [label = "b" ]; 18 | "node1" -- "node4" [ label = "c" ]; 19 | node3-> node4 [ label=d] -> node5 -> 6 20 | 21 | A -> {B C} 22 | 23 | } 24 | 25 | -------------------------------------------------------------------------------- /test/network/basicUsage.js: -------------------------------------------------------------------------------- 1 | // Network from `basicUsage` example 2 | 3 | // create an array with nodes 4 | var nodes = [ 5 | {id: 1, label: 'Node 1'}, 6 | {id: 2, label: 'Node 2'}, 7 | {id: 3, label: 'Node 3'}, 8 | {id: 4, label: 'Node 4'}, 9 | {id: 5, label: 'Node 5'} 10 | ]; 11 | 12 | // create an array with edges 13 | var edges = [ 14 | {from: 1, to: 3}, 15 | {from: 1, to: 2}, 16 | {from: 2, to: 4}, 17 | {from: 2, to: 5}, 18 | {from: 3, to: 3} 19 | ]; 20 | 21 | var options = {}; 22 | -------------------------------------------------------------------------------- /test/network/maximumWidthEdgeCase.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Maximum Width Edge Case Test 5 | 6 | 7 | 8 | 9 | 16 | 17 | 18 | 19 | 20 | 21 |

A word in a label that's wider than the maximum width will be forced onto a line. We can't do better without breaking the word into pieces, and even then the pieces could still be too wide.

22 | 23 |

Avoid the problem. Don't set ridiculously small maximum widths.

24 | 25 |
26 | 27 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /test/networkTest.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | JS Bin 6 | 7 | 8 | 15 | 16 | 17 |

Network Test

18 |
19 | 20 | 62 | 63 | -------------------------------------------------------------------------------- /test/timestep.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 32 | 33 | --------------------------------------------------------------------------------