core.js错误TypeError：可视网络角度为10的数组或数据集

问题描述

如何在TS中正确初始化vis-network以避免出现以下错误：

ERROR TypeError: Array or DataSet expected
    at t.value (vis-network.min.js?087a:58)
    at Lf.setData (vis-network.min.js?087a:58)
    at new Lf (vis-network.min.js?087a:58)
    at DependencyDashboardComponent.ngAfterViewInit (dependency-dashboard.component.ts?5305:39)
    at callHook (core.js?7d7a:2922)
    at callHooks (core.js?7d7a:2892)
    at executeInitAndCheckHooks (core.js?7d7a:2844)
    at refreshView (core.js?7d7a:7304)
    at refreshEmbeddedViews (core.js?7d7a:8335)
    at refreshView (core.js?7d7a:7257)

我有以下TS代码用于可视化网络初始化：

ngAfterViewInit(): void {
    // create an array with nodes
    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' },]);

    // create an array with edges
    const edges = new DataSet<any>([
      { from: '1',to: '3' },{ from: '1',to: '2' },{ from: '2',to: '4' },to: '5' },]);

    const data = { nodes,edges };

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

完整代码示例可在https://github.com/tillias/microservice-catalog/blob/dev/src/main/webapp/app/dashboard/dependency-dashboard/dependency-dashboard.component.ts下找到

它以前在角度9时就像魅力一样。

我创建了问题https://github.com/visjs/vis-network/issues/1085，但不确定是错误还是“功能”。

解决方法

根据vis.js developers的答案，关键是正确导入。这是有效的解决方案：

import {DataSet} from 'vis-data/peer';
import {Network} from 'vis-network/peer';

 refreshGraph(dependencies: IDependency[]): void {
    const nodes = new DataSet<any>();
    const edges = new DataSet<any>();

    dependencies.forEach(d => {
      nodes.add({
        id: d.id,label: d.name
      });

      edges.add({
        from: d.source?.id,to: d.target?.id
      })
    })

    const data = {nodes,edges};

    const container = this.visNetwork;
    this.networkInstance = new Network(container.nativeElement,data,{
      height: '500px',});
 }