1

我正在尝试使用 cytoscape 创建下图。

https://pathwaycommons.github.io/cytoscape-sbgn-stylesheet/

我已经安装了 cytoscape-sbgn-stylesheet 和 cytoscape 作为我的 Angular 应用程序的依赖项。

这是角度应用程序的代码


import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import * as cytoscape from 'cytoscape';
import sbgnStylesheet from 'cytoscape-sbgn-stylesheet';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild('cy') el: ElementRef;

  ngAfterViewInit() {
    var cy = cytoscape({
      container: document.getElementById('cy'), // container to render in
      stylesheet: sbgnStylesheet(cytoscape),
      elements :[]  //copied from https://github.com/PathwayCommons/cytoscape-sbgn-stylesheet/blob/master/demo.json
      layout: {
        name: 'preset',
      },
    });
  }
}

Html File
```

但我没有看到图表的实际样式,也没有看到任何标签。我究竟做错了什么?

这是我看到的没有节点样式和标签的图片

在此处输入图像描述

4

1 回答 1

3

调试时间太长,但错误很小,就用这个:

style: sbgnStylesheet(cytoscape),

代替:

stylesheet: sbgnStylesheet(cytoscape),

这是cytoscape-sbgn-stylesheet存储库 README 中的一个错误,用法段落明确指出使用“样式表”,尽管演示照常使用“样式”。

这是您的stackblitz的修订版

于 2021-02-03T17:57:10.380 回答