现在,我有几个问题：
>是否可以通过使用其中一种布局来实现图形,其中节点放置基于某种算法并且节点坐标不是必需的？例如,在VivaGraphJs中,图形会聚,以便连接的节点形成组,并且单个节点移动到外围.如果这可以在力导向布局上完成,可以关闭力,以便可以在画布上自由选择和拖动节点吗？
> Cytoscape如何实际处理大图(节点数/边数)？
>假设每个节点和边缘都有五个属性,我想要一个在鼠标悬停时显示这些属性的文本框.最简单的方法是什么？
> Wiki说可以添加单个节点,如下所示,但cy没有节点功能;这是一个错误吗？
var n0 = cy.node(“n1”);
cy.add(N0); //添加一个元素n0
>我尝试创建一个使用Arbor / Springy的简单随机数据图.下面的代码给出了错误
“return data.cy”中的“数据未定义”.当布局“随机”时,代码可以正常工作.我究竟做错了什么？
<!DOCTYPE HTML><HTML><@R_404_6882@> <Title>Test</Title> <style type="text/CSS"> .full-height { height: 600px; margin: 0 0; padding: 0 0; } </style> <script src="jquery-1.7.2.Js"></script> <script src="demo/cytoscape.all.Js"></script> <script src="demo/extensions/cytoscape.layout.arbor.Js"></script> <script src="demo/extensions/cytoscape.layout.springy.Js"></script> <script src="demo/arbor.Js"></script> <script src="demo/arbor-tween.Js"></script> <script src="demo/springy.Js"></script> <script type='text/JavaScript'> function onLoad() { // create a mapper for node size var nodeSizeMapper = { continuousMapper: { attr: { name: "weight",min: 0,max: 40 },mapped: { min: 5,max: 25 } } }; $("#cy").cytoscape( { layout: { name: "arbor" },// works when "random" style: { selectors: { "node":{ shape: "ellipse",fillcolor: "#3366FF",height: nodeSizeMapper,wIDth: nodeSizeMapper,labelText: { passthroughMapper: "ID" } },"edge": { linecolor: "#CCFF33",//"#ccc",targetArrowcolor: "#CCFF33",wIDth: { continuousMapper: { attr: { name: "weight",min: 20,max: 35 },mapped: { min: 1,max: 3 } } },targetArrowShape: "triangle",// labelText: { // passthroughMapper: "weight" // } },"node:selected": { fillcolor: "#333" },"edge:selected":{ linecolor: "#666",targetArrowcolor: "#666" } } },ready: function(cy) { },}); window.cy = $("#cy").cytoscape("get"); $.getJsON('edges_nodes.Json',function(elements) { //console.log(elements); window.elements = elements; cy.load( elements ); }); } </script></@R_404_6882@><body onload="onLoad()"> <div ID="cy"> </div></body></HTML> JsON文件读取：
{"nodes": [{"classes": "b","data": {"ID": "n0","weight": 40}},{"classes": "b","data": {"ID": "n1","weight": 19}},{"classes": "c","data": {"ID": "n2","weight": 0}},{"classes": "d","data": {"ID": "n3",{"classes": "e","data": {"ID": "n4","weight": 4}},{"classes": "a","data": {"ID": "n5","weight": 21}},"data": {"ID": "n6","weight": 13}},"data": {"ID": "n7","weight": 6}},"data": {"ID": "n8","weight": 10}},"data": {"ID": "n9","data": {"ID": "n10","weight": 24}},"data": {"ID": "n11","weight": 14}},"data": {"ID": "n12","weight": 11}},"data": {"ID": "n13","data": {"ID": "n14","data": {"ID": "n15","weight": 26}},"data": {"ID": "n16","data": {"ID": "n17","weight": 36}},"data": {"ID": "n18","weight": 7}},"data": {"ID": "n19","weight": 37}},"data": {"ID": "n20","weight": 28}},"data": {"ID": "n21","data": {"ID": "n22","weight": 20}},"data": {"ID": "n23","data": {"ID": "n24","weight": 31}},"data": {"ID": "n25","weight": 1}},"data": {"ID": "n26","weight": 29}},"data": {"ID": "n27","data": {"ID": "n28","weight": 34}},"data": {"ID": "n29","data": {"ID": "n30","weight": 38}},"data": {"ID": "n31","weight": 17}},"data": {"ID": "n32","weight": 39}},"data": {"ID": "n33","data": {"ID": "n34","data": {"ID": "n35","data": {"ID": "n36","weight": 15}},"data": {"ID": "n37","data": {"ID": "n38","weight": 2}},"data": {"ID": "n39","weight": 35}},"data": {"ID": "n40","data": {"ID": "n41","data": {"ID": "n42","data": {"ID": "n43","data": {"ID": "n44","data": {"ID": "n45","data": {"ID": "n46","data": {"ID": "n47","data": {"ID": "n48","data": {"ID": "n49","weight": 18}}],"edges": [{"data": {"source": "n5","ID": "e0","weight": 31,"target": "n19"}},{"data": {"source": "n37","ID": "e1","target": "n25"}},{"data": {"source": "n19","ID": "e2","target": "n2"}},{"data": {"source": "n16","ID": "e3","weight": 23,"target": "n27"}},{"data": {"source": "n29","ID": "e4","weight": 17,"target": "n4"}},{"data": {"source": "n1","ID": "e5","weight": 33,"target": "n12"}},{"data": {"source": "n13","ID": "e6","weight": 38,"target": "n33"}},{"data": {"source": "n12","ID": "e7","weight": 34,{"data": {"source": "n32","ID": "e8","target": "n13"}},{"data": {"source": "n44","ID": "e9","weight": 32,{"data": {"source": "n31","ID": "e10","weight": 24,{"data": {"source": "n35","ID": "e11","weight": 18,"target": "n48"}},{"data": {"source": "n25","ID": "e12","weight": 19,"target": "n15"}},"ID": "e13","target": "n16"}},{"data": {"source": "n24","ID": "e14","weight": 39,{"data": {"source": "n47","ID": "e15","weight": 22,"target": "n3"}},"ID": "e16","target": "n35"}},{"data": {"source": "n22","ID": "e17","weight": 15,"target": "n5"}},"ID": "e18","weight": 40,"target": "n10"}},"ID": "e19","weight": 21,"target": "n29"}}]}解决方法 (1)是的,如果在init选项中指定布局,它将用于初始放置节点,您不必指定节点位置.我认为,ungrabifyWhileSimulating乔木布局选项可以满足您在乔木期间的交互性要求. (2)使用SVG渲染器,与旧版本大致相同 – 这并不是很多.我现在正在进行大量的重构以使核心更快并处理更多元素,而我们正在研究的新画布渲染器将有望让我们处理100,000个元素(甚至可能是1,000,000个元素).
(3)使用像qtip这样的东西,并通过cytoscape.Js API(即eles.data())正常读取属性值.
(4)遗憾的是,由于预发布版本的不断发展,因此很难在维基上维护API,并且您阅读的内容已经过时了.我正在构建一个更好的解决方案,它很快就会实现.
(5)当图表为空时,它可能是乔木布局中的一个错误.毕竟,你是从一个空图开始的.也许,现在通过初始化$.getJsON()回调中的cytoscape.Js来解决它？
总结以上是内存溢出为你收集整理的cytoscape-web – Cytoscape.js强制定向布局和节点放置全部内容，希望文章能够帮你解决cytoscape-web – Cytoscape.js强制定向布局和节点放置所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）