Cytoscape布局 - 找不到这样的布局可乐

Question

我在使用Typescript 的Angular 2项目上使用 Cytoscape，并希望使用Cola布局。因此我使用npm将依赖项添加到我的项目中。由于我使用带有Typescript的Angular 2，我首先将js模块添加到angular-cli.json文件中，然后添加到index.html文件中。之后在我的NetworkComponent中，我用来显示图形的角度组件，我按如下方式导入库：

declare var cola:any;

然后我尝试按如下方式使用布局：

   this.cyto = cytoscape({
            container: document.getElementById("graph"),
            elements: this.graph.elements,
            style: res.json()
            });
    this.cyto.layout({name: "cola"});

图表不显示，我在控制台中收到以下错误：

  

无法应用布局：找不到这样的布局'可乐';你把它包括在内吗？   JS文件？

我可以使用concentric布局并显示图表，但我对其他布局扩展程序（例如cose-bilkent和springy也会出现相同的错误。

如何导入可乐库并将其用作我的图表布局？这可能有什么问题？

Answer 1

1. 安装cytoscape-cola：

   npm install cytoscape-cola --save
   

2. 导入cytoscape-cola模块：

   import cola from 'cytoscape-cola';
   

3. 在组件中使用cola

   cytoscape.use(cola);
   

然后您可以调用cola布局。

Answer 2

这是一个简单的修复。事实证明，我忘了在cola.js index.html中添加对cytoscape-cola.js cytoscape-cola.js文件的引用。我认为仅使用<li id="SR_R1_tab" class="t-Tabs-item a-Tabs-before a-Tabs-selected is-active" aria-controls="SR_R1" role="tab" aria-selected="true"> 就足够了，但在添加可乐 js文件后，它正常运行。