Question

我试图探索cytoscape图核心对象，我想在运行时访问它的属性。我可以使用Node.js解释器来实例化cy对象并在元素上运行方法吗？如果这是一个选项，我也不了解将要显示的真实图形的位置。 Node.js会打开一个浏览器窗口吗？

Answer 1

Node.js REPL表示JavaScript解释器，但它与DOM无关。从the examples on how to use cytoscape，DOM是必需的：

var cy = cytoscape({
  container: document.getElementById('cy') // container to render in
});

所以看来你不能在REPL中使用cytoscape的视觉功能。但是，文档说：

container：一个HTML DOM元素，其中应该呈现图形。如果运行Cytoscape.js 无头，则未指定。

但我认为你可以使用REPL无头地运行Cytoscape。

Answer 2

实际上我只是找到了如何在REPL环境中运行Cytoscape。仍然没有找到以图形方式显示它的方法，但我可以与对象进行交互以探索其属性：

$ node
>var cytoscape = require('cytoscape');
>var cy = cytoscape({
  container: document.getElementById('cy'), // container to render in
  elements: [ // list of graph elements to start with
    { // node a
      data: { id: 'a' }
    },
    { // node b
      data: { id: 'b' }
    },
    { // edge ab
      data: { id: 'ab', source: 'a', target: 'b' }
    }
  ],
  style: [ // the stylesheet for the graph
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'label': 'data(id)'
      }
    },

    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#ccc',
        'target-arrow-color': '#ccc',
        'target-arrow-shape': 'triangle'
      }
    }
  ],
  layout: {
    name: 'grid',
    rows: 1
  }
});

在我实例化cy对象后，我可以通过输入以下内容与之交互：

> cy.
cy.__defineGetter__      cy.__defineSetter__
cy.__lookupGetter__      cy.__lookupSetter__
cy.__proto__             cy.constructor
cy.hasOwnProperty        cy.isPrototypeOf
cy.propertyIsEnumerable  cy.toLocaleString
cy.toString              cy.valueOf

> cy.elements().forEach(function(e){ console.log(e.data())});
{ id: 'a' }
{ id: 'b' }
{ id: 'ab', source: 'a', target: 'b' }

在REPL环境中使用Cytoscape.js

2 个答案: