Cytoscape Javascript绘图软件随附了一些内置布局,但也包含其他创建为“扩展名”的布局。我尝试使用“ klay”布局,这是一个扩展,但我刚遇到JavaScript错误。 (我拥有的代码在内置布局(例如“ cose”)中可以正常工作,但在扩展名方面却无法使用。这是我使用的包含文件:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.14.0/cytoscape.min.js"></script>
<script src="https://unpkg.com/[email protected]/klay.js"></script>
<script type="text/javascript" src="scripts/cytoscape-klay.js"></script>
所以我在这里做错了什么?一旦有了正确的“ include”文件,代码就应该起作用,因为内置布局的布局使用应与扩展布局相同。谢谢。
跟随demo,我像这样正常工作:
document.addEventListener("DOMContentLoaded", function() {
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
// demo your layout
layout: {
name: "klay"
// some more options here...
},
style: [{
selector: "node",
style: {
"background-color": "#dd4de2"
}
},
{
selector: "edge",
style: {
"curve-style": "bezier",
"target-arrow-shape": "triangle",
"line-color": "#dd4de2",
"target-arrow-color": "#dd4de2",
opacity: 0.5
}
}
],
elements: {
nodes: [{
data: {
id: "n0"
}
},
{
data: {
id: "n1"
}
},
{
data: {
id: "n2"
}
},
{
data: {
id: "n3"
}
},
{
data: {
id: "n4"
}
},
{
data: {
id: "n5"
}
},
{
data: {
id: "n6"
}
},
{
data: {
id: "n7"
}
},
{
data: {
id: "n8"
}
},
{
data: {
id: "n9"
}
},
{
data: {
id: "n10"
}
},
{
data: {
id: "n11"
}
},
{
data: {
id: "n12"
}
},
{
data: {
id: "n13"
}
},
{
data: {
id: "n14"
}
},
{
data: {
id: "n15"
}
}
],
edges: [{
data: {
source: "n0",
target: "n1"
}
},
{
data: {
source: "n1",
target: "n2"
}
},
{
data: {
source: "n1",
target: "n3"
}
},
{
data: {
source: "n2",
target: "n4"
}
},
{
data: {
source: "n4",
target: "n5"
}
},
{
data: {
source: "n4",
target: "n6"
}
},
{
data: {
source: "n6",
target: "n7"
}
},
{
data: {
source: "n6",
target: "n8"
}
},
{
data: {
source: "n8",
target: "n9"
}
},
{
data: {
source: "n8",
target: "n10"
}
},
{
data: {
source: "n10",
target: "n11"
}
},
{
data: {
source: "n11",
target: "n12"
}
},
{
data: {
source: "n12",
target: "n13"
}
},
{
data: {
source: "n13",
target: "n14"
}
},
{
data: {
source: "n13",
target: "n15"
}
}
]
}
}));
});
body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px;
}
#cy {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 999;
}
<html>
<head>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/[email protected]/klay.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-klay.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
该演示通常使用本地cytoscape-klay文件,因此实际上应该没有问题。该代码对您有用吗?