cytoscape 的样式表不生效。文本和图形显示不正确

Question

我正在尝试使用 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

```

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

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

Answer 1

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

style: sbgnStylesheet(cytoscape),

而不是：

stylesheet: sbgnStylesheet(cytoscape),

这是 cytoscape-sbgn-stylesheet repositories README, the Usage 段落中的一个错误，该段落明确指出要使用“样式表”，尽管演示照常使用“样式”。

这是你的stackblitz

修改后的版本

cytoscape 的样式表不生效。文本和图形显示不正确

Stylesheet for cytoscape does not take affect. Text and graph does not show correctly

cytoscape

cytoscape-web

cytoscape.js