Cytoscape

Question

我不清楚如何使用无头模式（node.js）来布局图形和提取计算的（每个节点）定位信息。

下面是我能想到的最简单的例子，它应该有效，但没有。我错过了什么？

const cytoscape = require('cytoscape');
const fcose = require('cytoscape-fcose');

const elements = [
    { data: { id: 'n0' } },
    { data: { id: 'n1' } },
    { data: { id: 'n2' } },
    { data: { id: 'n3' } },
    { data: { id: 'e1', source: 'n0', target: 'n1' } },
    { data: { id: 'e2', source: 'n2', target: 'n3' } },
]

cytoscape.use(fcose); // register extension

const cy = cytoscape()

const layout = cy.layout({
    name: 'fcose',
    container: null,
    layout: {
        boundingBox: {
            x1: 0,
            y1: 0,
            w: 600,
            h: 600
        },
    },
    elements,
    headless: true,
    styleEnabled: false,
    animate: false,
    ready: function () {
        console.log(this)
    }
}).run()
console.log(cy.nodes())

Answer 1

一个工作示例：

    const cytoscape = require('cytoscape');
    const fcose = require('cytoscape-fcose');
    
    const elements = [
        { data: { id: 'n0' } },
        { data: { id: 'n1' } },
        { data: { id: 'n2' } },
        { data: { id: 'n3' } },
        { data: { id: 'e1', source: 'n0', target: 'n1' } },
        { data: { id: 'e2', source: 'n2', target: 'n3' } },
    ]

    cytoscape.use(fcose); // register extension

    const cy = cytoscape({
        container: null,
        elements,
        headless: true,
        styleEnabled: false,
        animate: null,
    })

    const layout = cy.layout({
        name: 'fcose',
        animate: null,
    }).run()

    cy.nodes().map((node, id) => {
        console.log({
            id,
            position: node.position(),
            boundingbox: node.boundingbox(),
        })
    })

输出：

    {
      id: 0,
      position: { x: -10.739928259168892, y: 23.05192029205518 },
      boundingbox: {
        x1: -12.239928259168892,
        y1: 21.55192029205518,
        x2: -9.239928259168892,
        y2: 24.55192029205518,
        w: 3,
        h: 3
      }
    }
    {
      id: 1,
      position: { x: -34.115851865686764, y: -17.994146351728972 },
      boundingbox: {
        x1: -35.615851865686764,
        y1: -19.494146351728972,
        x2: -32.615851865686764,
        y2: -16.494146351728972,
        w: 3,
        h: 3
      }
    }
    {
      id: 2,
      position: { x: 34.115851865686764, y: -6.375158623550128 },
      boundingbox: {
        x1: 32.615851865686764,
        y1: -7.875158623550128,
        x2: 35.615851865686764,
        y2: -4.875158623550128,
        w: 3,
        h: 3
      }
    }
    {
      id: 3,
      position: { x: -4.785486637914051, y: -23.05192029205518 },
      boundingbox: {
        x1: -6.285486637914051,
        y1: -24.55192029205518,
        x2: -3.285486637914051,
        y2: -21.55192029205518,
        w: 3,
        h: 3
      }
    }

Cytoscape - 无头模式示例

Cytoscape - headless mode example

cytoscape.js