如何使用Angular在vis.js中使网络可视化工作? [英] How to make Network visualization work in vis.js with Angular?

问题描述

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

I've installed the dependencies I need through:
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);
  }
}

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

I tried like above just to try out but it gives me this error:

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

Cannot read property 'solve' of undefined

我想念什么?

推荐答案

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

I encountered the same problem when using the Vis.js Network module in my Angular project. After some searching I figured out the problem is caused by the way the Network object is constructed. If you replace this line:

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

...这行:

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

然后问题解决了.

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

Backgound
The Typescript type definitions for Vis.js have a mistake in the definition of the constructor, the definition claims that

构造函数的

"options"参数是可选的:constructor(container: HTMLElement, data: Data, options?: Options);.

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

But if you look into the Vis.js code you'll notice that passing an undefined options attribute causes important initialization code to be skipped, causing the error you encountered.
If instead, you pass an empty options object then the Network is initialized correctly.

这篇关于如何使用Angular在vis.js中使网络可视化工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！