使用 cytoscape.js 时,节点会颠倒呈现
When using cytoscape.js nodes are rendered upside down
我正在处理 80 到 1000 个节点的网络,这时我意识到渲染的节点是颠倒的。
我的意思是,第一象限画在第四象限应该画的地方。所以我决定只使用四个节点,看看发生了什么,结果是这样的:
每个节点属于不同的象限。分别是 (50,50);(-50,50);(-50,-50) 和 (50,-50).
我使用的是 "preset" 布局,预计可以正确呈现它们(就像在笛卡尔平面中一样)。我只使用最新版本的 "cytoscape.min.js"。
有问题的javascript:
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
layout: { name: 'preset'},
elements: [
{data: { id: '(0,0)'}, position: { x: 0, y: 0 }},
{data: { id: '++'}, position: { x: 50, y: 50 }},
{data: { id: '+-'}, position: { x: 50, y: -50 }},
{data: { id: '--'}, position: { x: -50, y: -50 }},
{data: { id: '-+'}, position: { x: -50, y: 50 }},
],
style: [
{
selector: 'node',
style: {
'content': 'data(id)',
'width': '2',
'height': '2',
'color': '#000',
'font-size': '10',
'opacity': 0.9,
'shape': 'ellipse',
'z-index': '9999'
}
},
],
});
现在,这是预期的行为吗?我使用了错误的库?还是我错过了什么?
我已经尝试了所有布局选项。
计算机图形使用笛卡尔坐标,但 y 轴是倒转的。这只是计算机上的惯例。
另请注意,平移和缩放会影响变换矩阵,因此原点在屏幕上的位置并不总是相同。
见
我正在处理 80 到 1000 个节点的网络,这时我意识到渲染的节点是颠倒的。
我的意思是,第一象限画在第四象限应该画的地方。所以我决定只使用四个节点,看看发生了什么,结果是这样的:
我使用的是 "preset" 布局,预计可以正确呈现它们(就像在笛卡尔平面中一样)。我只使用最新版本的 "cytoscape.min.js"。
有问题的javascript:
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
layout: { name: 'preset'},
elements: [
{data: { id: '(0,0)'}, position: { x: 0, y: 0 }},
{data: { id: '++'}, position: { x: 50, y: 50 }},
{data: { id: '+-'}, position: { x: 50, y: -50 }},
{data: { id: '--'}, position: { x: -50, y: -50 }},
{data: { id: '-+'}, position: { x: -50, y: 50 }},
],
style: [
{
selector: 'node',
style: {
'content': 'data(id)',
'width': '2',
'height': '2',
'color': '#000',
'font-size': '10',
'opacity': 0.9,
'shape': 'ellipse',
'z-index': '9999'
}
},
],
});
现在,这是预期的行为吗?我使用了错误的库?还是我错过了什么?
我已经尝试了所有布局选项。
计算机图形使用笛卡尔坐标,但 y 轴是倒转的。这只是计算机上的惯例。
另请注意,平移和缩放会影响变换矩阵,因此原点在屏幕上的位置并不总是相同。
见