时间戳

首页 > 解决方案 > cytoscape 的样式表不生效。文字和图表显示不正确

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

问题描述

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

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

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

在此处输入图像描述

标签： cytoscape.jscytoscapecytoscape-web

解决方案

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

style: sbgnStylesheet(cytoscape),

代替：

stylesheet: sbgnStylesheet(cytoscape),

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

这是您的stackblitz的修订版

推荐阅读