如何在带有角度的vis.js中实现网络可视化？
如何在带有角度的vis.js中实现网络可视化？
提问于 2018-07-19 09:07:47
我已经安装了所需的依赖项：
vis.js：npm install vis --save
@type/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);
}
}我试着像上面那样尝试一下，但是它给了我一个错误：
无法读取未定义的属性“解决”
我遗漏了什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-02-25 21:07:35
在我的Vis.js项目中使用网络模块时，我遇到了同样的问题。经过一些搜索，我发现这个问题是由构造网络对象的方式引起的。如果您替换这一行：
this.networkInstance = new Network(container, data);..。用这一行：
this.networkInstance = new Network(container, data, {});然后问题就解决了。
背景
Vis.js的类型定义在构造函数的定义中出错，定义声称
构造函数的"options“参数是可选的：
constructor(container: HTMLElement, data: Data, options?: Options);。
但是，如果您查看Vis.js代码，您会注意到传递一个未定义的选项属性会导致重要的初始化代码被跳过，从而导致您遇到的错误。
如果您传递一个空选项对象，则网络将被正确初始化。
Stack Overflow用户
发布于 2019-02-18 13:49:10
尝试添加一个超时，如下所示：
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);
}我有一个类似的问题，我想这与我试图在一个选项卡中显示图表有关，我必须像这样引用它来将它添加到事件队列中，所以在当前调用堆栈中的所有其他调用之后执行它。我希望这能帮到你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51418587
复制相关文章
相似问题
腾讯云开发者
