天道酬勤,学无止境

vis.js-network

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

Question 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

2022-04-22 06:08:04    分类:技术分享    javascript   node.js   vis.js   vis.js-network

How to change edge connection points between nodes VisJs

Question I'm trying to code a visualization pipeline in VisJs. So I have a graph and some nodes. The nodes can generate/use a few different data types. So I need something like this ------------------ | Node1 | ------------------ int char | | | | | | | | int string char ------------------ | Node2 | ------------------ So one node has more than 1 anchor points that only connect to it's own type. Can I change the location from where the edges are drawn to where they are connected in the node? Does anyone know a better JS library to do this or can this be done with VisJs? Answer1 Basically, you

2022-02-17 01:13:04    分类:技术分享    javascript   web   pipeline   vis.js   vis.js-network

Add Edge without using Toolbar visJs

Question 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 Answer1 just use: network.addEdgeMode(); see this example in plunker: https://plnkr.co/edit/bYweWazPIPgG8smhrNAw?p=preview

2022-02-07 09:43:55    分类:技术分享    javascript   jquery   vis.js-network   vis.js

Why don't my node hover popups work in my vis.js network?

Question 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: true, hierarchical: { enabled: true, levelSeparation: 180, nodeSpacing: 180

2022-01-24 21:23:53    分类:技术分享    javascript   node.js   typescript   vis.js   vis.js-network

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

Question 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 vis.Network(container, data, {}); network.on("click", function(e) { tw_id = 1205; if (e.nodes[0

2022-01-22 11:29:44    分类:技术分享    javascript   collapse   expand   vis.js   vis.js-network

VISJS: save manipulated data to json

Question I am using vis.js to create network graphs on a web page. My need is to store manipulated graphs to a database in JSON format, exporting the json from the network graph. I did not find any documentation about it, is it feasible to export vis.js network with manipulated data for storage (in either JSON or in a form convertable into JSON)? Answer1 As for data, here's my hacky way to extract it for storage (I'll try to cut off code bits irrelevant to the question): // get nodes and edges var nodes = network.body.data.nodes._data; // contains id, label, x,y, custom per-node options and

2022-01-22 11:20:24    分类:技术分享    javascript   vis.js   vis.js-network

add multiple node box selector on the canvas of VisJS network graph in ReactJS

Question Examples Here is a jQuery example of canvas drawing on the network to select multiple nodes: http://jsfiddle.net/kbj54bas/ (or Github) How can this be translated to React? Sandbox I setup react-graph-vis(source) in this sandbox, and added a ref to the Graph: https://codesandbox.io/s/5m2vv1yo04 Attempts having trouble adding eventLisnters to the Graph/canvas using a React.createRef() on the '' having trouble using this method on the canvas: .getContext("2d") I feel I don't understand how to access the react-graph-vis methods mentioned here End Goal draw box selector on left-click +

2021-12-23 07:29:24    分类:技术分享    javascript   reactjs   canvas   vis.js   vis.js-network

vis.js crossed edges in 4.21 hierarchical graph

Question Problem: After switchnig to new (4.21) version of vis.js (from 4.18) my graph is all messed up. EDIT: The change occurs between versions 4.19.1 and 4.20. I guess it has something to do with multiple changes in network introduced in the 4.20 version. I'm building a family free. I spent some time to get a nice looking graph. Then I found out that new version of vis.js is available. Once I decided to use it, the edges of my graph started to cross. Here's my nice-looking graph using 4.18.1: Here's what happens if I change to 4.21.0: What did I do wrong? How to fix this? Same data, same

2021-11-23 04:08:38    分类:技术分享    javascript   vis.js   vis.js-network

SVG Foreign Object sizing inconsistent

Question I'm trying to make 2 html objects in SVGs and further use them inside Vis.js graphs. My first svg (Button) works as intended and looks good. My problem is that when I try to insert the table div the width/height are not what I have set them to be. Here's what I get: As you can see the button is larger than the red box even though the red box has a larger width and height (1000px x 800px versus 220px x 68px)! Here's my JavaScript: // THE RED BOX const tableComponent = `<svg xmlns="http://www.w3.org/2000/svg" width="1000px" height="800px"> <foreignObject x="0" y="0" width="100%" height=

2021-10-23 09:48:40    分类:技术分享    svg   vis.js   vis.js-network

visjs network arrow customization

Question I need to show "?" instead of the standard arrows types in my visjs network. I followed this solution: How to change arrows in vis.js to chicken feet or cardinality However I also need to hide and show nodes based on a property on it. Once the nodes are hidden and shown again, the "?" on edges is lost and the edges default to the standard arrow heads. Fiddle: https://jsfiddle.net/gu2kwze0/51/ network.getEdgeById('1').drawArrows = function drawArrows(ctx, arrowData) { ctx.font = "20px OpenSans"; if (this.options.arrows.to.enabled === true) { //'to' side suspect ctx.fillText('?'

2021-10-23 09:07:39    分类:技术分享    vis.js-network   vis.js