使用cytoscape可视化节点和边缘

Question

我是cytoscape的新手，想知道代表数据的最佳方式。我正在使用angular-cytoscape。

下面的图片将显示正在显示的节点和边缘：

共享一些代码。问题是显示，如果您检查我在图像上方共享的链接，则可以看到数千个节点和边全部显示在一起。如果我要聚簇，放一个放大镜 任何解决方案/想法都将有所帮助

export class ERDGraphComponent implements OnInit {
  public entityType = 'person';
  public graphData: any;
  public layout: LayoutOptions = {
    name: 'preset',
    directed: true,
    padding: 5,
    animate: true
  };

  public filtersVisibility = true;
  // filter checkboxes
  public showOrganisations = true;
  public showInvestigations = true;
  public showPerson = true;
  public showCorrespondence = true;
  public showTask = true;
  public showDocument = true;
  public showCssoFile = true;
  public showOperation = true;
  public showMultimedia = true;

  // filters end
  public saveState = false;
  public savedCytoInstance: any;
  public entities = ['person', 'organisation', 'investigation', 'task', 'correspondence', 'document', 'multimedia'];
  public layoutTypes = ['random', 'grid', 'circle', 'concentric', 'breadthfirst', 'cose'];
  public filters = new Set([...this.entities]);
  public entity: Person | Organisation | Investigation;
  public erdEntity: ERD;
  public styles = styles;
  public removedNodes: any = {};
  private zoomFactor = 0.05;
  public layoutValue: any;
  @ViewChild('layoutMenu') layoutMenu: MatSelect;
  @ViewChild('menu') menu: MatMenu;
  @ViewChild(NgCytoComponent) private cytoComponent: NgCytoComponent;
  @ViewChild('graphcontainer') graphContainer: ElementRef;
  constructor(private repository: ERDRepository, private route: ActivatedRoute, private cytoscapeService: CytoscapeService) {
    this.erdEntity = route.snapshot.data['graphData'];
    const layoutName = this.erdEntity.graphData.layout ? this.erdEntity.graphData.layout : this.layout.name;
    const elements = this.erdEntity.graphData.elements || {
      nodes: this.erdEntity.graphData.nodes,
      edges: this.erdEntity.graphData.edges
    };
    this.graphData = {
      layout: { ...this.layout, name: layoutName },
      minZoom: 0.5,
      maxZoom: 1.5,
      style: this.styles,
      elements
    };
    setTimeout(() => {
      this.processRemovedNodesTobeSilientlyAdded();
    }, 1000);
    this.layoutValue = 'present';
  }