При использовании cytoscape.js узлы отображаются вверх ногами

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

Также обратите внимание, что панорамирование и масштабирование влияют на матрицу преобразования, так что начало координат не всегда одинаково на экране.

Увидеть

• https://en.wikipedia.org/wiki/Transformation_matrix
• http://js.cytoscape.org/