javascriptlayoutcytoscape.jspreset

When using cytoscape.js nodes are rendered upside down

I was working with networks of 80 to 1000 nodes, when I realized the nodes where being rendered upside down.

I mean, the first quadrant was being drawn on where the fourth quadrant should be. So I decided to work with just four nodes and see what happened, the result was this: the result was this. Each node belongs to a different quadrant. Which are (50,50);(-50,50);(-50,-50) and (50,-50).

I'm using the "preset" layout, which is expected to render them correctly (like in a cartesian plane). I'm working with the latest version of "cytoscape.min.js" only.

The javascript in question:

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'
      }
    },
],

});

Now, is this the expected behavior and I'm working with the wrong library? or am I missing something?

I already tried with all the options for layout.

Solution

  • Computer graphics use Cartesian co-ordinates, but the y-axis is inverted. That's just the convention on computers.

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

    Also note that the pan and zoom affect the transformation matrix such that the origin is not always the same on-screen position.

    See