天道酬勤,学无止境

vis.js-network

How to change edge connection points between nodes VisJs

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?

2022-02-16 15:34:37    分类:问答    javascript   web   pipeline   vis.js   vis.js-network

在不使用工具栏 visJs 的情况下添加 Edge(Add Edge without using Toolbar visJs)

问题 Vis.js 提供了一个工具栏,通过单击工具栏上的按钮来添加节点和边。 我想要一种方法,这样我就可以在拖放节点上添加边缘。 我已经搜索过,但没有找到任何关于如何在单击一个节点时创建边缘并在其他节点上拖动以在它们之间创建边缘而不使用此处提供的工具栏的实际示例。 谢谢 回答1

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

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

2022-02-07 08:36:58    分类:问答    javascript   jquery   vis.js-network   vis.js

为什么我的节点悬停弹出窗口在我的 vis.js 网络中不起作用?(Why don't my node hover popups work in my vis.js network?)

问题 我遇到了一个问题,尽管在我的节点对象中包含“title”属性,但当我将鼠标悬停在节点上时,没有显示包含我的标题内容的弹出窗口。 这是我的选项以及我如何设置网络。 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, edgeMinimization: true, parentCentralization: true, direction: 'UD', // UD, DU, LR, RL sortMethod: 'directed' // hubsize, directed } }, physics: { enabled: false }

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

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

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, edgeMinimization: true

2022-01-24 17:34:43    分类:问答    javascript   node.js   typescript   vis.js   vis.js-network

如何在 vis.js 中隐藏图形的分支?(How to hide graph's branch in vis.js?)

问题 我可以通过单击节点1205来在 vis.js 中显示部分图形,但无法弄清楚如何在第二次单击同一节点时使展开的部分消失? 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] == tw_id) { sel_id = e.nodes[0]; var node = nodes.get(e.nodes[0]); nodes.add([ {id: 2021, label: "l"}, {id: 2047, label: "l"} ]); edges.add

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

VISJS:将操作数据保存到 json(VISJS: save manipulated data to json)

问题 我正在使用 vis.js 在网页上创建网络图。 我的需要是以 JSON 格式将操作图存储到数据库中,从网络图中导出 json。 我没有找到任何有关它的文档,是否可以使用操纵数据导出 vis.js 网络以进行存储(以 JSON 或可转换为 JSON 的形式)? 回答1 至于data ,这是我提取它以进行存储的 hacky 方法(我将尝试切断与问题无关的代码位): // get nodes and edges var nodes = network.body.data.nodes._data; // contains id, label, x,y, custom per-node options and doesn't contain options from options.nodes; presumably contains option values set when network was created, not current ones (it is so for x,y) // network.body.nodes[id].nodeOptions shows options from options.nodes but not custom per-node options (same for edges and network.body.edges[id]

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

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

2022-01-17 21:55:48    分类:问答    javascript   collapse   expand   vis.js   vis.js-network

VISJS: save manipulated data to json

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)?

2022-01-16 21:46:59    分类:问答    javascript   vis.js   vis.js-network

ReactJS中VisJS网络图画布添加多节点框选择器(add multiple node box selector on the canvas of VisJS network graph in ReactJS)

问题 例子 下面是网络上画布画布选择多个节点的jQuery示例: http://jsfiddle.net/kbj54bas/(或 Github) 如何将其转换为 React? 沙盒 我在这个沙箱中设置了react-graph-vis (源代码),并添加了对 Graph 的引用:https://codesandbox.io/s/5m2vv1yo04 尝试 在 '' 上使用 React.createRef() 将 eventLisnters 添加到 Graph/canvas 在画布上使用此方法时遇到问题: .getContext("2d") 我觉得我不明白如何访问这里提到的react-graph-vis方法 最终目标 在左键单击 + 鼠标拖动时绘制框选择器在mouseup ,在画布上绘制的框中选择节点,并清除绘制 也许我在这方面走错了方向。 回答1 我使用您共享的 JSSampler 示例将其放在一起。 解决方案 您只需要使用 ref 来连接网络和画布。 其他一切都差不多了。 https://codesandbox.io/s/5m2vv1yo04 清理建议 将全局变量移动到反应类中将 VisJS 高亮代码拆分为自己的文件 回答2 vis.js 文档显示 Network 对象公开了方法 (http://visjs.org/docs/network)。 react-graph-vis

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