Question

当我意识到被颠倒渲染的节点时，我正在使用80到1000个节点的网络。

我的意思是，第一象限是在第四象限的位置绘制的。所以我决定只使用四个节点，看看发生了什么，结果如下：每个节点属于不同的象限。其中（50,50）;（ - 50,50）;（ - 50，-50）和（50，-50）。

我正在使用“预设”布局，预计会正确渲染它们（就像在笛卡尔平面中一样）。我只使用最新版本的“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'
      }
    },
],

});

现在，这是预期的行为吗？我正在使用错误的库？还是我错过了什么？

我已经尝试了所有布局选项。

Answer 1

计算机图形使用笛卡尔坐标，但y轴是反转的。这只是计算机上的惯例。

请参阅https://gamedev.stackexchange.com/questions/83570/why-is-the-origin-in-computer-graphics-coordinates-at-the-top-left

另请注意，平移和缩放会影响变换矩阵，使得原点在屏幕上的位置并不总是相同。

见

使用cytoscape.js时，节点会颠倒呈现

1 个答案: