天道酬勤,学无止境

cytoscape-web

Increase width of selected edges only (cytoscape.js)

How can I predefine when I select a few nodes that are connected or simply edges, to make the width of the selected edges be bigger, without affecting the rest of edges of the entire network or the node's width? I predefined this when the nodes or edges are selected: $('#cy').cytoscape({ style: cytoscape.stylesheet() .selector(':selected') .css({ 'background-color': 'black', 'line-color': 'red', 'target-arrow-color': 'black', 'source-arrow-color': 'black', 'opacity': 1 })... but there is no 'line-width', so if I put 'width': 5 it will appy it to all the edges and nodes. So how could I modify

2022-04-05 15:00:39    分类:问答    javascript   graph   cytoscape.js   cytoscape   cytoscape-web

Cytoscape js - Call a function whenever a node is clicked

I initialized the cytoscape like this: var cy = cytoscape({ container: document.getElementById('cy'), elements: [ { data: { id: 'a' } }, { data: { id: 'b' } }, { data: { id: 'c' } }, { data: { id: 'ab', source: 'a', target: 'b' } }, { data: { id: 'ac', source: 'a', target: 'c' } }] }); Then I added a function which adds a new node whenever the user double clicks on the viewport. var nid = 1; document.getElementById("cy").ondblclick = function(e) { cy.add({ data: { id: nid }, renderedPosition: { x: e.x, y: e.y } }); nid++; }; Then I wrote this function which should be called whenever user

2022-02-09 10:36:21    分类:问答    cytoscape.js   cytoscape-web

增加浏览器中的堆栈大小(Increasing stack size in browsers)

问题 简短的问题:我有一个非常深入递归的javascript。 如何增加堆栈大小以便我可以执行它(类似于 Unix 系统中的“ulimit -s unlimited”)? 长话短说:我必须画一个图,我使用 Cytoscape JS (http://js.cytoscape.org/) 和 Dagre 布局扩展 (https://github.com/cytoscape/cytoscape.js-dagre)。 绘图算法深入递归,我最终在 Chrome 中得到“未捕获的 RangeError:超出最大调用堆栈大小”,在 Firefox 中得到“递归过多”。 如何将堆栈大小设置为无限制或非常大(例如 Unix 系统中的“ulimit -s unlimited”)以便绘制图形? 谢谢! 回答1

2022-01-16 03:43:45    分类:技术分享    recursion   stack   size   cytoscape.js   cytoscape-web

Increasing stack size in browsers

Short question: I have a javascript that goes very deep in recursion. How can I increase the stack size so that I can execute it (something like "ulimit -s unlimited" in Unix systems)? Long story: I have to draw a graph and I use Cytoscape JS (http://js.cytoscape.org/) coupled with the Dagre layout extension (https://github.com/cytoscape/cytoscape.js-dagre). The drawing algorithm goes deep in the recursion and I end up getting "Uncaught RangeError: Maximum call stack size exceeded" in Chrome and "too much recursion" in Firefox. How can I set the stack size to unlimited or very large (i.e. like

2022-01-16 01:48:14    分类:问答    recursion   stack   size   cytoscape.js   cytoscape-web

如何将工具提示 javascript 库 (qtip.js) 与 cytoscape.js 一起使用(How to use tooltip javascript library(qtip.js) together with cytoscape.js)

问题 我想将 qtip 与 cytoscape.js 一起使用,以在使用 cytoscape.js 创建的图形中鼠标悬停事件的节点中显示工具提示。 我已将以下代码放入 ready: function() 中,如下所示: cy.on('mouseover','node',function (event) { var eid = $(this).data('id'); $(this).qtip({ overwrite: false, content: eid, position: { my: 'right center', at: 'left center', target: $(this) }, show: { event: event.type, ready: true }, hide: { fixed: true } }, event); }); 但是,在鼠标悬停事件的节点中没有显示工具提示.. 请帮助我。 回答1 为 qtip 提供正确的坐标以与节点悬停进行交互。 可以用 cyPosition 来完成希望这会有所帮助: cy.on('mousemove','node', function(event){ var target = event.cyTarget; var sourceName = target.data("source"); var targetName =

2021-08-14 03:21:19    分类:技术分享    jquery   qtip   cytoscape.js   cytoscape-web

Initializing cytoscape

being new to cytoscapeweb 2, i am following one of the provided example in order to learn how to use the API. i cant make it work and firebug reports the following message: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) var n = this.nodesGroup.getBBox(); in my html document, the cytoscapeweb div is embedded in a jquery tab widget (just to provide context) somewhere in my.html <div id="tabs"> <ul> <li><a href="#tabs-1">Interactors Selection</a></li> <li><a href="#tabs-2">Interactome Builder</a></li> </ul> <div id="tabs-1"> <p>Tab 1 content</p> </div> <div id="tabs-2"> <p>Tab 2

2021-08-11 21:29:46    分类:问答    cytoscape-web

Cytoscape.js 力导向布局和节点放置(Cytoscape.js force-directed layouts and node placement)

问题 我最近发现了 Cytoscape.js 并想尝试强制导向布局:arbor 和 springy。 现在,我有几个问题: 是否可以通过使用其中一种布局来实现图形,其中节点放置基于某种算法并且节点坐标不是必需的? 例如,在 VivaGraphJS 中,图会收敛,因此连接的节点形成组,孤立的节点移动到外围。 如果这可以在力导向布局上完成,是否可以关闭力,以便可以在画布上自由选择和拖动节点? Cytoscape 可以实际处理多大的图(节点/边的数量)? 假设每个节点和边都有五个属性,我想要一个在鼠标悬停时显示这些属性的文本框。 什么是最简单的方法来做到这一点? Wiki 上说可以像下图那样添加单个节点,但是 cy 没有节点功能; 这是错误吗? var n0 = cy.node("n1"); cy.add(n0); // 添加一个元素,n0 我尝试创建一个使用 Arbor/Springy 的简单随机数据图。 下面的代码在“return data.cy”中给出了错误“数据未定义”。 当布局为“随机”时,代码有效。 我究竟做错了什么? <!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css"> .full-height { height: 600px; margin: 0 0; padding: 0 0

2021-08-10 21:18:35    分类:技术分享    cytoscape-web

Cytoscape.js force-directed layouts and node placement

I recently found out about Cytoscape.js and would like to try out the force-directed layouts: arbor and springy. Now, I have a couple of questions: Is it possible to achieve a graph, by using one of the layouts, in which the node placement is based on some algorithm and node coordinates are not necessary? For example, in VivaGraphJS the graph converges so that the connected nodes form groups and lone nodes move to the periphery. If this can be done on force-directed layout, can the forces be turned off so the nodes can be selected and dragged freely on the canvas? How large graphs (number of

2021-07-31 14:34:55    分类:问答    cytoscape-web