angular - 如何使用 Angular 在 vi​​s.js 中实现网络可视化？

Question

我已经通过以下方式安装了我需要的依赖项:
vis.js:npm install vis --save
@types/vis:npm install @types/vis --save-dev

代码片段:

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import { Network, DataSet } from 'vis';

@Component({
  selector: 'test',
  template: '<div #network></div>'
})
export class TestComponent implements AfterViewInit {
  @ViewChild('network') el: ElementRef;
  private networkInstance: any;

  ngAfterViewInit() {
     const container = this.el.nativeElement;
     const nodes = new DataSet<any>([
        {id: 1, label: 'Node 1'},
        {id: 2, label: 'Node 2'},
        {id: 3, label: 'Node 3'},
        {id: 4, label: 'Node 4'},
        {id: 5, label: 'Node 5'}
    ]);

    const edges = new DataSet<any>([
        {from: 1, to: 3},
        {from: 1, to: 2},
        {from: 2, to: 4},
        {from: 2, to: 5}
    ]);
    const data = { nodes, edges };

    this.networkInstance = new Network(container, data);
  }
}

我像上面那样尝试只是为了尝试，但它给了我这个错误:

Cannot read property 'solve' of undefined

我错过了什么？

Answer 1

我在 Angular 项目中使用 Vis.js 网络模块时遇到了同样的问题。经过一番搜索后，我发现问题是由网络对象的构造方式引起的。如果替换此行:

this.networkInstance = new Network(container, data);

...用这一行:

this.networkInstance = new Network(container, data, {});

那么问题就解决了。

背景
Vis.js 的 Typescript 类型定义在构造函数的定义中存在错误，定义声称

"options" argument to the constructor is optional: constructor(container: HTMLElement, data: Data, options?: Options);.

但是，如果您查看 Vis.js 代码，您会发现传递未定义的选项属性会导致跳过重要的初始化代码，从而导致您遇到的错误。
相反，如果您传递一个空选项对象，则网络会正确初始化。