vis.js-network | 易学教程

Vis.js network: how to extract customized options of a node (and an edge)?

阅读更多关于 Vis.js network: how to extract customized options of a node (and an edge)?

问题 I'm developing a simplistic graph editor using vis.js/network. Since an editor has to store the network state, I have a saving helper where I extract data from a network and store it as JSON. For now, I use seemingly quite an ugly/hacky way to extract data for storage: // get nodes and edges var nodes = network.body.data.nodes._data; // brief ones; network.body.nodes contain much more stuff (x,y, default stuff) //# look for a suitable getter var edges = network.body.data.edges._data; //

vis.js simple example: edges do not show

阅读更多关于 vis.js simple example: edges do not show

I working on a simple network visualization example based on vis.js. I have 5 nodes and 6 edges which I store in a JSON file. The edges do not show up, whereas they do in the examples given on the vis.js homepage. Code: HTML-File: <!doctype html> <html> <head> <title>Cryring Topology</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="vis.js"></script> <link href="vis.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { width: 1200px; height:1200px; border: 1px solid

Vis.js network: how to extract customized options of a node (and an edge)?

阅读更多关于 Vis.js network: how to extract customized options of a node (and an edge)?

I'm developing a simplistic graph editor using vis.js/network. Since an editor has to store the network state, I have a saving helper where I extract data from a network and store it as JSON. For now, I use seemingly quite an ugly/hacky way to extract data for storage: // get nodes and edges var nodes = network.body.data.nodes._data; // brief ones; network.body.nodes contain much more stuff (x,y, default stuff) //# look for a suitable getter var edges = network.body.data.edges._data; // network.body.data.edges._data is a hash of { id: , from: , to: } // get node positions var positions =

How to add zoom in zoom out buttons in visjs using angularjs?

阅读更多关于 How to add zoom in zoom out buttons in visjs using angularjs?

Need help in having a zoom in and zoom out button in visjs network graph using angularjs, I could not find any relevant options for this. Please help, I am also providing a plunker link as an example Code <vis-network data="data" options="options" height="100%"></vis-network> $scope.options = { autoResize: true, height: '800', width: '100%' }; Take a look at the interaction, navigationButtons option. It has built in controls for zoom, pan and reset view. You need to change your vis options to include navigationButtons: true and keyboard: true to have keboard shortcuts enabled $scope.options =

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

阅读更多关于 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: { borderWidth:4, size:60, color: { border: '#222222', background: 'grey' }, font:{color:'black'} }, edges: { arrows: { to: {enabled: false, scaleFactor:1}, middle: {enabled: false, scaleFactor:1}, from: {enabled: false, scaleFactor:1} }, color: 'black' }, { physics:

Set Zoom Level in Vis.js

阅读更多关于 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 to update the colors. I can't change the container size due to the layout. When the network loads, it causes the font to be incredibly small and unreadable. Is there a way I could set the zoom level as an option so that only the current step in the

Vis.js network node customization: cards as nodes

阅读更多关于 Vis.js network node customization: cards as nodes

问题 I would like to build a network where the nodes represent information that is structured similarly to cards. With a card I mean a structure composed of two areas: multi-line text area where I can put information that comes from different resources, like a name, a phone number, an address and control area where I can have 2-3 buttons (preferably with icons) that maximize the node, or make the node a root/main one etc. As far as I could see from the vis.js documentation see example here, it is

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

阅读更多关于 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: { borderWidth:4, size:60, color: { border: '#222222', background: 'grey' }, font:{color:'black'} }, edges: { arrows: { to: {enabled: false, scaleFactor:1}, middle: {enabled: false, scaleFactor:1}, from: {enabled: false, scaleFactor:1} }, color: 'black' }, { physics: enabled: false; }; Has anyone done this? if so can you provide an example or advice on best way to

Accessing node data in vis.js click handler

阅读更多关于 Accessing node data in vis.js click handler

I am having a network graph of nodes and edges and would like to get the node data once it gets clicked. I currently have var network = new vis.Network(container, data, options); network.on( 'click', function(properties) { console.log('clicked node ' + properties.nodes); }); But this just gives me some internal id [105]. Is there a way to get the actual data that is associated with the node. The node ids that you get in the properties is not "some internal id", but these are the id's of the nodes that you defined yourself. You can simply read the node's data from your own DataSet with nodes

Vis.js network node customization: cards as nodes

阅读更多关于 Vis.js network node customization: cards as nodes

I would like to build a network where the nodes represent information that is structured similarly to cards. With a card I mean a structure composed of two areas: multi-line text area where I can put information that comes from different resources, like a name, a phone number, an address and control area where I can have 2-3 buttons (preferably with icons) that maximize the node, or make the node a root/main one etc. As far as I could see from the vis.js documentation see example here , it is possible to enter paragraph/text as a node label but there is no way to structure a node via Html. Can