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);
  }
}

我像上面一样尝试过，但是它给了我这个错误：

无法读取未定义的属性'solve'

我想念什么？

Answer 1

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

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

...这行：

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

然后问题解决了。

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

构造函数的
“ options”参数是可选的：constructor(container: HTMLElement, data: Data, options?: Options);。

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

Answer 2

尝试添加超时，如下所示：

ngAfterViewInit() {
     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}
    ]);
    setTimeout(() => {
        const data = { nodes, edges };
        const container = this.el.nativeElement;
        this.networkInstance = new Network(container, data);
    }, 0);
}

我有一个类似的问题，我想这与我试图在选项卡中显示图表有关，我必须像这样引用它才能将其添加到事件队列中，因此在所有当前调用堆栈中的其他调用。我希望这会有所帮助。

如何使用Angular在vis.js中使网络可视化工作？

2 个答案: