vis.js

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

问题 I have built my network with the visNetwork package in Shiny. I would like to click on a node and then display the information about the node from a dataframe. I have been able to do this for scatterplots with the click and nearpoint functions, such as the ones in the Shiny example shown here: http://shiny.rstudio.com/gallery/plot-interaction-selecting-points.html. For my network, I have tried: server <- function(input, output) { output$network <- renderVisNetwork({ visNetwork(my.nodes, my

问题 I am using vis.js to display network nodes. I am parsing the node data from JSON and storing it in an array: $.each(jsonObj, function(i, val) { var itemId = val.id; var itemGroup = val.group; var itemLabel = val.label; var itemLevel = val.level; var itemData = val.nodeData; var itemX = val.x; var itemY = val.y; var nodeData = JSON.parse(val.nodeData); nodes[nodeCnt] = { id: itemId, group: itemGroup, label: itemLabel, level: itemLevel, title: itemData, x: itemX, y: itemY, font: { color: colour

问题 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 need help in making this plunker work something similar to this vis example in angularjs. I am using <vis-network data="data" options="options"></vis-network> tag and below data and options data var nodes = [ {id: 1, label: 'Node 1'}, {id: 2, label: 'Node 2'}, {id: 3, label: 'Node 3'}, {id: 4, label: 'Node 4'}, {id: 5, label: 'Node 5'} ]; var edges = [ {from: 1, to: 3}, {from: 1, to: 2}, {from: 2, to: 4}, {from: 2, to: 5} ]; $scope.data = VisDataSet({ nodes: nodes, edges: edges }); options

问题 I am trying to create a timeline view using visjs of a upgrade scenario (Pre Upgrade, Pre Release &Post Upgrade) something similar to the image below. Need some pointers to create different region colors as depicted in the image, CSS to change the main marker to an image source and also on hover of the slider (region or markers) it should show some description. CSS .vis-item.vis-background.preupgrade { background-color: rgba(0, 153, 255, 0.2); } .vis-item.vis-background.prerelease {

问题 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 created a timeline chart by using vis.js. I have many vis-box items. Since I can display very limited information on the timeline. I therefore want to show the detail information for the item when a user mover over the item. I check documentation for timeline event at this url http://visjs.org/docs/timeline/#Events. I see how to handle select event. I am wondering how to add mouse over event for an item? Thanks. This is for select event function onSelect (properties) { alert('selected items

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

问题 I am using the vis.js Graph3d library to plot 3D graphs with my data. Let's say the X-axis represent my nodes, Y-axis represent the last 5 hours and Z-axis represent the value. There can be hours when there are no readings for a node which I want to be represented as empty spaces. This works as expected if the first node has data for all the hours and the consequent nodes have data missing for some hours. This example fiddle demonstrates it considering only 2 nodes. Now if the first node is