cytoscape.js如何显示div中的节点?
cytoscape.js how to display nodes in div?
我已经尝试使用我的代码一段时间了,但我只显示了一个空的 div,我不知道为什么。
var elementsStr = "[";
for(var i = 0;i < elements.length; i++) {
var toConCat = "{data:{id:\"node-" + i + "\"}},";
elementsStr = elementsStr.concat(toConCat);
if(isEven(i) && i != 0) {
console.log(i);
toConCat = "{data: {id:\"edge-" + i/2 + "\",source:\"node-" + i-1 + "\",target:\"node-" + i + "\"}},";
elementsStr = elementsStr.concat(toConCat);
}
}
var toConCat = "{data:{id:\"edge-" + (elements.length/2) + "\",source:\"node-" + (elements.length-2) + "\",target:\"node-" + (elements.length-1) + "\"}}";
elementsStr = elementsStr.concat(toConCat);
elementsStr = elementsStr.concat("]");
console.log(elementsStr);
responseDiv.innerHTML = "";
var cy = cytoscape({
container: responseDiv,
style: [
{
selector: 'node',
style: {
'background-color': '#666',
'label': 'data(id)'
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
}
}
],
layout: {
name: 'grid',
rows: 1
}
});
var eles = cy.add(elementsStr);
console.log(eles);
}
};
elementsStr 是
[{data:{id:"node-0"}},{data:{id:"node-1"}},{data:{id:"edge-1",source:"node-0",target:"node-1"}}]
最后还是没有显示,我哪里做错了?
这种方法非常复杂,只需坚持 cy.add() 上的文档并尝试构建元素而不是字符串连接,而是像 json 文件一样,也可以使用单引号编号:
var nodes = [];
for (var i = 0; i < elements.length; i++)
nodes.push({ group: "nodes", data: { id: i });
}
var k = 0;
for (var i = 0; i < elements.length; i+=2)
nodes.push({ group: "edges", data: { id: "e" + k, source: "n" + i, target: "n" + (i + 1) } });
k += 1;
}
cy.add(nodes);
在你的 html 文件中,添加一个 div 和正确的 id,之后不要碰它,我真的不知道你为什么添加 .innerHtml = "" , 没必要:)
我已经尝试使用我的代码一段时间了,但我只显示了一个空的 div,我不知道为什么。
var elementsStr = "[";
for(var i = 0;i < elements.length; i++) {
var toConCat = "{data:{id:\"node-" + i + "\"}},";
elementsStr = elementsStr.concat(toConCat);
if(isEven(i) && i != 0) {
console.log(i);
toConCat = "{data: {id:\"edge-" + i/2 + "\",source:\"node-" + i-1 + "\",target:\"node-" + i + "\"}},";
elementsStr = elementsStr.concat(toConCat);
}
}
var toConCat = "{data:{id:\"edge-" + (elements.length/2) + "\",source:\"node-" + (elements.length-2) + "\",target:\"node-" + (elements.length-1) + "\"}}";
elementsStr = elementsStr.concat(toConCat);
elementsStr = elementsStr.concat("]");
console.log(elementsStr);
responseDiv.innerHTML = "";
var cy = cytoscape({
container: responseDiv,
style: [
{
selector: 'node',
style: {
'background-color': '#666',
'label': 'data(id)'
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
}
}
],
layout: {
name: 'grid',
rows: 1
}
});
var eles = cy.add(elementsStr);
console.log(eles);
}
};
elementsStr 是
[{data:{id:"node-0"}},{data:{id:"node-1"}},{data:{id:"edge-1",source:"node-0",target:"node-1"}}]
最后还是没有显示,我哪里做错了?
这种方法非常复杂,只需坚持 cy.add() 上的文档并尝试构建元素而不是字符串连接,而是像 json 文件一样,也可以使用单引号编号:
var nodes = [];
for (var i = 0; i < elements.length; i++)
nodes.push({ group: "nodes", data: { id: i });
}
var k = 0;
for (var i = 0; i < elements.length; i+=2)
nodes.push({ group: "edges", data: { id: "e" + k, source: "n" + i, target: "n" + (i + 1) } });
k += 1;
}
cy.add(nodes);
在你的 html 文件中,添加一个 div 和正确的 id,之后不要碰它,我真的不知道你为什么添加 .innerHtml = "" , 没必要:)