cytoscape 的样式表不生效文字和图表显示不正确

问题描述

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

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

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

这是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

``

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

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

解决方法

调试时间太长，但错误很小，就用这个：

style: sbgnStylesheet(cytoscape),

代替：

stylesheet: sbgnStylesheet(cytoscape),

这是 cytoscape-sbgn-stylesheet 存储库自述文件中的错误，Usage 段落明确指出使用“样式表”，尽管演示照常使用“样式”。

这是您的stackblitz

的修订版