我最近发现了Cytoscape.js,并想尝试强制导向的布局:乔木和弹性.
现在,我有几个问题:
是否可以通过使用其中一种布局来实现图形,其中节点放置基于某种算法并且节点坐标不是必需的？例如,在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; }
</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", //"#ccc",
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>
</head>
<body onload="onLoad()">
<div class="full-height" 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", "weight": 19}}, {"classes": "e", "data": {"id": "n4", "weight": 4}}, {"classes": "a", "data": {"id": "n5", "weight": 21}}, {"classes": "e", "data": {"id": "n6", "weight": 13}}, {"classes": "a", "data": {"id": "n7", "weight": 6}}, {"classes": "a", "data": {"id": "n8", "weight": 10}}, {"classes": "b", "data": {"id": "n9", "weight": 6}}, {"classes": "c", "data": {"id": "n10", "weight": 24}}, {"classes": "c", "data": {"id": "n11", "weight": 14}}, {"classes": "e", "data": {"id": "n12", "weight": 11}}, {"classes": "b", "data": {"id": "n13", "weight": 6}}, {"classes": "e", "data": {"id": "n14", "weight": 24}}, {"classes": "b", "data": {"id": "n15", "weight": 26}}, {"classes": "b", "data": {"id": "n16", "weight": 6}}, {"classes": "c", "data": {"id": "n17", "weight": 36}}, {"classes": "a", "data": {"id": "n18", "weight": 7}}, {"classes": "b", "data": {"id": "n19", "weight": 37}}, {"classes": "c", "data": {"id": "n20", "weight": 28}}, {"classes": "d", "data": {"id": "n21", "weight": 11}}, {"classes": "d", "data": {"id": "n22", "weight": 20}}, {"classes": "e", "data": {"id": "n23", "weight": 7}}, {"classes": "b", "data": {"id": "n24", "weight": 31}}, {"classes": "b", "data": {"id": "n25", "weight": 1}}, {"classes": "e", "data": {"id": "n26", "weight": 29}}, {"classes": "d", "data": {"id": "n27", "weight": 31}}, {"classes": "d", "data": {"id": "n28", "weight": 34}}, {"classes": "b", "data": {"id": "n29", "weight": 40}}, {"classes": "d", "data": {"id": "n30", "weight": 38}}, {"classes": "b", "data": {"id": "n31", "weight": 17}}, {"classes": "a", "data": {"id": "n32", "weight": 39}}, {"classes": "d", "data": {"id": "n33", "weight": 4}}, {"classes": "c", "data": {"id": "n34", "weight": 38}}, {"classes": "d", "data": {"id": "n35", "weight": 13}}, {"classes": "b", "data": {"id": "n36", "weight": 15}}, {"classes": "a", "data": {"id": "n37", "weight": 29}}, {"classes": "a", "data": {"id": "n38", "weight": 2}}, {"classes": "d", "data": {"id": "n39", "weight": 35}}, {"classes": "c", "data": {"id": "n40", "weight": 24}}, {"classes": "c", "data": {"id": "n41", "weight": 7}}, {"classes": "e", "data": {"id": "n42", "weight": 24}}, {"classes": "c", "data": {"id": "n43", "weight": 4}}, {"classes": "d", "data": {"id": "n44", "weight": 40}}, {"classes": "a", "data": {"id": "n45", "weight": 19}}, {"classes": "b", "data": {"id": "n46", "weight": 17}}, {"classes": "b", "data": {"id": "n47", "weight": 36}}, {"classes": "b", "data": {"id": "n48", "weight": 26}}, {"classes": "a", "data": {"id": "n49", "weight": 18}}], "edges": [{"data": {"source": "n5", "id": "e0", "weight": 31, "target": "n19"}}, {"data": {"source": "n37", "id": "e1", "weight": 31, "target": "n25"}}, {"data": {"source": "n19", "id": "e2", "weight": 31, "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, "target": "n4"}}, {"data": {"source": "n32", "id": "e8", "weight": 34, "target": "n13"}}, {"data": {"source": "n44", "id": "e9", "weight": 32, "target": "n19"}}, {"data": {"source": "n31", "id": "e10", "weight": 24, "target": "n19"}}, {"data": {"source": "n35", "id": "e11", "weight": 18, "target": "n48"}}, {"data": {"source": "n25", "id": "e12", "weight": 19, "target": "n15"}}, {"data": {"source": "n31", "id": "e13", "weight": 18, "target": "n16"}}, {"data": {"source": "n24", "id": "e14", "weight": 39, "target": "n27"}}, {"data": {"source": "n47", "id": "e15", "weight": 22, "target": "n3"}}, {"data": {"source": "n1", "id": "e16", "weight": 34, "target": "n35"}}, {"data": {"source": "n22", "id": "e17", "weight": 15, "target": "n5"}}, {"data": {"source": "n37", "id": "e18", "weight": 40, "target": "n10"}}, {"data": {"source": "n37", "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来解决它？