3

cytoscape.js を使用してグラフを描画します。右上の位置でノードの上に円を追加する必要があります。グラフを描画した後、ノードの位置を取得できる API はありますか。

また、次のようにコードを使用しました: elements : { nodes : [ { data : { id : '1', name : 'A' } } ] }

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

'#1' はデータ属性のノードの ID です。ただし、その正確な位置にノード/円を追加することはできません。

4

1 に答える 1

3

次のようなものを取得したい場合：

ここに画像の説明を入力

次に、このコードは、ID を認識しているノードに円を追加します。

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 の初心者です。自己責任で使用してください。

于 2015-01-07T11:21:10.330 に答える