vis.js | 易学教程

vis.js - how to place item in center of graph

阅读更多关于 vis.js - how to place item in center of graph

问题 I have tree structure like next : id: 1 id: 2 id: 8 id: 9 id: 10 id: 11 id: 12 id: 3 id: 13 id: 4 id: 5 id: 6 id: 7 id: 8 And need to show it (as network graph, not as tree) After page loading graph must be centered on {id:1} item. How can I make it? 来源： https://stackoverflow.com/questions/32853591/vis-js-how-to-place-item-in-center-of-graph

Add Edge without using Toolbar visJs

阅读更多关于 Add Edge without using Toolbar visJs

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

Vis.js: Highlight selected node and grey out the others

阅读更多关于 Vis.js: Highlight selected node and grey out the others

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

Why is vis.js not displaying anything

阅读更多关于 Why is vis.js not displaying anything

问题 I am trying vis.js and have been using the example which can be found here: http://visjs.org/docs/network/ I used exact the same html-setup which is like this: <html> <head> <script type="text/javascript" src="../../dist/vis.js"></script> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #mynetwork { width: 600px; height: 400px; border: 1px solid lightgray; } </style> </head> <body> <div id="mynetwork"></div> <script type="text/javascript"> // create

Horizontal scrollbar for visjs timeline

阅读更多关于 Horizontal scrollbar for visjs timeline

问题 Is it possible to bind a horizontal scrollbar to timeline? I need to implement a horizontal scrollbar for visjs timeline. When the time line is dragged the scrollbar should update itself and when i scroll the time line should move smoothly. Maybe i can use the moveRight and MoveLeft to simulate this behaviour? http://visjs.org/examples/timeline/interaction/navigationMenu.html 来源： https://stackoverflow.com/questions/36740571/horizontal-scrollbar-for-visjs-timeline

How to hide graph's branch in vis.js?

阅读更多关于 How to hide graph's branch in vis.js?

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

Import vis.js with webpack

阅读更多关于 Import vis.js with webpack

问题 I would like to import only DataSet and Network from vis.js in our Webpack application using ES6 modules. One easy way to do it is to just import dist/vis-network.min.js but it's already minified so not very compatible with our webpack workflow. I had a look at the vis.js code and it's not using ES6 modules so I can't import them. Is there a simpler way then doing a custom vis.js build? 回答1: It is not only possible but encouraged to import only the parts of vis.js that you want to use in your

Add Edge Dynamically visjs

阅读更多关于 Add Edge Dynamically visjs

问题 Can anyone help me with adding edges dynamically in this visjs network? Actually, I am trying to use drag and drop to add nodes to the canvas, but I need help adding edges when I click the node and add edge dynamically to another node existing on canvas. 回答1: You can use the vis.js 'update' function to add either nodes or edges dinamycally. You simply pass in an array with the set of either nodes or edges that you are trying to add. You call it like this: nodes.update(updateNodesArray) OR

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"

Javascript visualization package for multidimentional bar chart

阅读更多关于 Javascript visualization package for multidimentional bar chart

I am looking for an open source visualization package to create a 3d bar chart similar to the one I have created in excel (see image below). I have tried vis.js, but there was no way I could tell to format the 'walls' to show gridlines and a background color. If this is possible in vis.js I could do that as well, but I didnt see anything in the documentation. The features I need are: Gridlines for 'walls' background color options for 'walls' Free movement/rotation Ability to change individual bar color based on some logic Ability to export image to pdf, etc.. Ideal Chart (excel): Best I could