Добавление дополнительной информации над узлом в cytoscape.js

Использование cytoscape.js для построения графика. Мне нужно добавить круг над узлом в правом верхнем углу. После рисования графа есть ли какой-нибудь API, с помощью которого мы можем получить позиции узлов.

Кроме того, я использовал следующий код: elements: {nodes: [{data: {id: '1', name: 'A'}}]}

var pos = cy.nodes("#1").position();

«# 1» - это идентификатор узла в атрибуте данных. Однако мы не можем добавить узел / круг в эту точную позицию.


cytoscape.js cytoscape-web
person smita chougale    schedule 06.01.2015    source источник
comment
Можете ли вы предоставить jsfiddle.net свою попытку?   -  person xmojmr    schedule 07.01.2015
comment
jsfiddle.net/ugyk1xya/5   -  person smita chougale    schedule 07.01.2015
comment
использовал cy.add () в качестве примера для добавления узла в переданные ему позиции.   -  person smita chougale    schedule 07.01.2015
comment
Итак, функция addRandomNode получает абсолютные координаты, и вы хотите создать круг в этом абсолютном положении? и вы думаете, что позиция, рассчитанная cy.nodes("#1").position('x') и cy.nodes("#1").position('x') неверна?   -  person xmojmr    schedule 07.01.2015
comment
Я хочу создать круг над узлом (т.е. Id = 1). Получение значений позиции в переменных и передача их в функцию, но, как вы видите, нет вывода, показывающего добавленный узел где-либо внутри div. Используя эти значения позиции, как я могу создать круг на узле?   -  person smita chougale    schedule 07.01.2015
comment
Я внес некоторые незначительные изменения в код, предоставлены те же позиции, захваченные .position (), теперь он добавляет узел, но не на тот узел, который мне нужен. jsfiddle.net/ugyk1xya/6   -  person smita chougale    schedule 07.01.2015

Ответы (1)


arrow_upward
3
arrow_downward

Если вы хотите получить что-то вроде:

введите описание изображения здесь

затем этот код добавляет круг к узлу, зная его идентификатор:

function addCircle(nodeId, circleText){
    var parentNode = cy.$('#' + nodeId);
    if (parentNode.data('isCircle') || parentNode.data('circleId'))
        return;
    parentNode.lock();
    var px = parentNode.position('x') + 10;
    var py = parentNode.position('y') - 10;    
    var circleId = (cy.nodes().size() + 1).toString();
    parentNode.data('circleId', circleId);
    cy.add({
        group: 'nodes',
        data: { weight: 75, id: circleId, name: circleText, isCircle: true },
        position: { x: px, y: py },
        locked: true
    }).css({
        'background-color': 'yellow',
        'shape': 'ellipse',
        'background-opacity': 0.5
    }).unselectify();
}

// ...

addCircle('1', 'Bubble A');

но он должен вызываться после того, как станет известно положение узла, когда макет установится.

Блокировка предназначена для предотвращения разрыва этого узла и его круга.

Демо jsFiddle: http://jsfiddle.net/xmojmr/wvznb9pf/

Использование составного узла, который будет удерживать узел и его круг вместе, вероятно, будет лучше, если реализована поддержка позиционирования дочерних узлов.

Отказ от ответственности: я новичок в cytoscape.js, используйте на свой страх и риск

person xmojmr    schedule 07.01.2015
comment
@smitachougale Добро пожаловать в Stack Overflow :) - person xmojmr; 07.01.2015
comment
мы можем сделать круг по краям? - person smita chougale; 16.01.2015
comment
@smitachougale в моем ответе кружок можно расположить где угодно. Только кажется над узлом. Вы можете разместить его, например, в середине края с помощью edge.source (). position () и edge.target (). position () и формула средней точки линии. Это должно работать с прямыми краями. Для изогнутых краев может быть способ получше. Откройте новый вопрос SO, чтобы узнать и продолжить просмотр github.com/cytoscape/cytoscape.js/ issues / 798 - person xmojmr; 16.01.2015
comment
Как использовать этот метод cy.add () для создания круга на изогнутом крае? - person smita chougale; 17.02.2015
comment
@smitachougale Я понятия не имею, как подойти к этому со стороны. Лично я бы попытался подключить его напрямую как-нибудь / где-нибудь в CanvasRenderer.drawStyledEdge, где известны координаты кривой. Для этого потребуется изучить некоторую математику, как в Переполнение стека: квадратичная кривая Безье: вычислить точку - person xmojmr; 17.02.2015