Выпуск визуализации узлов и ребер с помощью Cytoscape - PullRequest
Новая
       15

Выпуск визуализации узлов и ребер с помощью Cytoscape

1 голос
/ 08 ноября 2019

Я новичок в 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';
  }
...