vis.js-network

问题 I'd like to use vis.js for displaying and editing a graph (hence storing its nodes, edges and options). To implement this, I need to save changes of the network (=graph) on various events. On of them is rearranging via drag and drop. Now, there's an on method which supports the dragEnd event meaning I can do stuff like network.on("dragEnd",saveToTiddlerAfterDragging); However what's passed to the handler is this object: { nodes: [Array of selected nodeIds], edges: [Array of selected edgeIds],

问题 I am having an issue where despite including the 'title' property in my node objects, when I hover over a node, no pop up window with the contents of my title are displayed. Here are my options and how I set my network up. setUpNetwork(){ let container = document.getElementById('mynetwork'); //These options dictate the dynamic of the network let options = { nodes: { shape: 'box' }, interaction: { dragNodes: false, dragView: false, hover: true }, layout: { randomSeed: undefined, improvedLayout

问题 I'm trying to plot a quite huge network (i.e., ~1k nodes and ~1k edges) with vis.js 4.21.0 . Here is my options object: var options = { autoResize: true, height: '400px', clickToUse: false, layout: { hierarchical: { direction: 'UD', sortMethod: 'directed', } }, physics: { stabilization: false, barnesHut: { gravitationalConstant: -80000, springConstant: 0.001, springLength: 200 } }, nodes: { shape: 'dot', size: 20, font: { size: 15, color: '#ffffff' }, borderWidth: 2 }, groups: groups, }; The

问题 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%' }; 回答1: 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

问题 I have assigned level to each node. Now on each level, I want nodes to appear in same order in which it is inserted. That's what even documentation says. I have seen many examples where it happens and only difference with my case is: there are edges on X axis too. Here's a snippet: function main() { var graph = { nodes: new vis.DataSet([ { "id": "M1", "label": "M1", "level": 0 }, { "id": "R1", "label": "R1", "level": 0 }, { "id": "W1", "label": "W1", "level": 0 }, { "id": "C1R1", "label":

问题 I have a fairly simple hierarchical structure of nodes, but when vis.js draws them, the order of nodes on each level doesn't make much sense - there are a lot of crossed edges (screenshot: Default Layout ) I am hoping to get a layout similar to that given here: Expected Layout My vis.js options are as follows; { "layout": { "hierarchical": { "direction": "LR", "sortMethod": "directed", "nodeSpacing": 200, "treeSpacing": 400 } }, "edges": { "smooth": { "type": "continuous" } }, "nodes": {

问题 Vis.js provides a toolbar to add node and edges by click button on toolbar. I want to have a way so I can add edges on drag and drop nodes over each other. I have searched but didn't find any practical example on how to create edges on clicking one node and drag over other to create edge between them without using toolbar they provided here. Thanks 回答1: just use: network.addEdgeMode(); see this example in plunker: https://plnkr.co/edit/bYweWazPIPgG8smhrNAw?p=preview 来源： https://stackoverflow

问题 I am using vis.js and one of my tasks is to implement the following behavior: when I select a node, the node and its neighbors must be highlighted. In the same time, all the other nodes must have a 'grayed-out' effect. Looking at the vis.js showcase I saw this: https://kenedict.com/networks/startups/ and it is exactly what I want to acquire. The question is...how do I achieve this effect easily? Do I really need to iterate between all the nodes in the graph and change their color properties?

问题 I am able to display part of the graph in vis.js by clicking on the node 1205 with the following but cannot figure out how to make the expanded part disappear on a second click on the same node? var nodes = new vis.DataSet([ {id: 2696, label: "l"}, {id: 1205, label: "l"}, {id: 2697, label: "l"} ]); var edges = new vis.DataSet([ {from: 2696, to: 2697}, {from: 2696, to: 1205} ]); var container = document.getElementById('mynetwork'); var data = { nodes: nodes, edges: edges }; var network = new

问题 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"