Questions tagged [vis.js-network]

use this tag for the network module of vis.js. Don't use it for questions regarding the R implementation (visnetwork)

Network module of vis.js displays force directed graphs with html canvas. Like vis.js itself, it is designed to be easy to use, handle large amounts of dynamic data, and enable manipulation of the data.

Documentation: http://visjs.org/docs/network/

Examples: http://visjs.org/network_examples.html

235 questions
18
votes
2 answers

Accessing node data in vis.js click handler

I have a network graph of nodes and edges and would like to get the node data once it gets clicked. e.g, var network = new vis.Network(container, data, options); network.on( 'click', function(properties) { console.log('clicked node ' +…
Vishnu
  • 4,377
  • 7
  • 26
  • 40
17
votes
3 answers

Stop vis.js physics after nodes load but allow drag-able nodes

I am trying to draw a vis.js network diagram and have vis load and position the nodes. I then want the physics to be disabled so the nodes can be moved by the user. I have tried this but it is not working. var options = { nodes: { …
Perry
  • 1,277
  • 2
  • 17
  • 39
16
votes
3 answers

vis.js - Place node manually

How do I set a node's position in vis.js? I want to initially position at least one node manually. I know that a node has the options x and y. I set both, and also tried variations of layout options (randomSeed, improvedLayout, hierarchical), the…
Wulsh Briggle
  • 163
  • 1
  • 1
  • 9
14
votes
4 answers

Connected nodes overlapping other edges or nodes

I'm using vis.js to display nodes, not all nodes are connected to each other, but they are overlapping as shown in the picture, is there a way with the option to avoid this, I went through the configure options but could not find.
Noor
  • 19,638
  • 38
  • 136
  • 254
12
votes
2 answers

Export visjs network to jpeg/png image

I am working on angular vis.js. Vis.js works on canvas for creating nodes and links between the nodes. Is there any way to get the image (jpeg/png) from the visj.s canvas?
DEV1205
  • 352
  • 1
  • 6
  • 18
10
votes
1 answer

Set Zoom Level in Vis.js

I have a network that I'm building with vis.js, but it is too large width-wise to fit in the pages' container. The network runs left to right and contains steps about a specific process. As a person completes tasks, a server feeds new JSON records…
9
votes
2 answers

Vis.js network: how to add a node on click inside the canvas?

Manipulation methods of vis.js only include addNodeMode(), but not something like addNode(). I wonder if there's some nice way to create a node on click. May be by manipulating the data instead of network itself? Of'course, one may…
YakovL
  • 7,557
  • 12
  • 62
  • 102
9
votes
2 answers

How to avoid network graph nodes overlapping?

I was using Visjs and displaying rectanglar nodes with text. Some of the nodes can have a couple of lines of text so I added a heuristic algorithm to work out roughly where the line breaks should go to avoid very wide, single line chunks of text in…
Volksman
  • 1,969
  • 23
  • 18
9
votes
4 answers

Change mouse cursor over vis.js network node

Is there a way to change the mouse cursor in vis.js when it's over a network node? I'm looking to treat them as links to the object the node represents and have been asked that the cursor change to the "finger" icon to indicate it can be clicked.
Paul Dugas
  • 325
  • 2
  • 14
8
votes
2 answers

Avoiding overlapping edges with minimal physics in vis.js

I'm using vis.js to build a story visualization tool, and a key feature is to allow authors to manually position nodes via dragging. There's also often several edges with the same origin and destination nodes. Without physics, these edges overlap.…
Andrew Fredette
  • 191
  • 2
  • 9
8
votes
3 answers

How to limit zooming of a vis.js network?

I've implemented a simple network using vis.js. Here's my code: //create an array of nodes var nodes = [ { id: "1", label: "item1" }, { id: "2", label: "item2" }, { id: "3", label:…
Sandesh Ghanta
  • 385
  • 2
  • 4
  • 16
8
votes
1 answer

Multiple lines between nodes and hierarchical layout in vis.js

I have a vis.js network graph that contains multiple edges between nodes and I am trying to have it setup with a hierarchical layout as well. If I do a normal graph without the hierarchical layout options then multiple lines are shown between nodes,…
Rohan Malcolm
  • 368
  • 4
  • 11
8
votes
1 answer

vis.js - fit a set of nodes on screen

I have a network graph in vis.js with many nodes. When selecting a certain group, I would like to pan and zoom the graph so that all nodes of that group fit on screen. I am traversing each node in the graph and calculating a bounding box for all the…
Nicolas Klein
  • 158
  • 1
  • 1
  • 6
7
votes
2 answers

Configure vis network diagrams to zoom only on pinch not on mouse scroll

I have a large network diagram created by vis.js which is 100% wide in the browser and very tall, thus requires scrolling down the page to see it all - I want my page to operate like most other web pages in the world - but vis.js zooms when I…
abulka
  • 1,316
  • 13
  • 18
7
votes
4 answers

Vis.js node tooltip doesn't show up on hover using ReactJS

Greetings, In my project I am displaying a vis.js graph, using ReactJS and I would like to have the nodes of the displayed network react to the mouse-hover event by displaying a popup/tooltip. Every node has a title attribute, and thats what the…
rayaqin
  • 187
  • 2
  • 14
1
2 3
15 16