js 和 Angular 在我的网页上显示一些图表。我安装了
npm install vis
npm install @type/vis
但我发现两者都有一个名为DataView的功能。 我想使用vis的DataView,但似乎有 Angular 自动找到@type/vis的DataView。
我的代码是这样的:
import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import { Network, DataSet, DataView} from 'vis';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements AfterViewInit {
@ViewChild('network', {static: false}) el: ElementRef;
@ViewChild('nodeFilterSelect', {static:false}) nodeFilter: ElementRef;
@ViewChild('edgesFilter', {static: false}) edgeFilter: ElementRef;
private networkInstance: any;
ngAfterViewInit() {
const nodes_set = new DataSet<any>([
{ id: 1, label: 'Eric Cartman', age: 'kid', gender: 'male' },
{ id: 2, label: 'Stan Marsh', age: 'kid', gender: 'male' },
{ id: 3, label: 'Wendy Testaburger', age: 'kid', gender: 'female' },
{ id: 4, label: 'Mr Mackey', age: 'adult', gender: 'male' },
{ id: 5, label: 'Sharon Marsh', age: 'adult', gender: 'female' }
]);
const edges_set = new DataSet<any>([
{ from: 1, to: 2, relation: 'friend', arrows: 'to, from', color: { color: 'red'} },
{ from: 1, to: 3, relation: 'friend', arrows: 'to, from', color: { color: 'red'} },
{ from: 2, to: 3, relation: 'friend', arrows: 'to, from', color: { color: 'red'} },
{ from: 5, to: 2, relation: 'parent', arrows: 'to', color: { color: 'green'} },
{ from: 4, to: 1, relation: 'teacher', arrows: 'to', color: { color: 'blue'} },
{ from: 4, to: 2, relation: 'teacher', arrows: 'to', color: { color: 'blue'} },
{ from: 4, to: 3, relation: 'teacher', arrows: 'to', color: { color: 'blue'} },
]);
const nodesView = new DataView(nodes_set, {})
const edgesView = new DataView(edges_set, {})
const container = this.el.nativeElement;
const data = { nodes: nodes_set, edges: edges_set };
[![enter image description here][1]][1]
this.networkInstance = new Network(container, data, {});
}
}
你可以看到我从vis导入DataView,但是我们把光标放在DataView上,它是这样的:
@type/vis 中的 DataView 是:
export class DataView<T extends DataItem | DataGroup> {
length: number;
constructor(items: T[]);
}
即使我从 vis 导入它,似乎也有 Angular 地找到 @type/vis 的 DataView 怎么解决这个问题?
最佳答案
<罢工>
这就是类型的工作原理。他们确保您编写正确的代码。里面的包裹@types
添加 vis
的类型提示包,它不提供自己的类型。要修复错误,您需要传递一个数组,而不是一个对象:
const nodesView = new DataView(nodes_set);
const edgesView = new DataView(edges_set);
罢工><罢工>罢工>
我深入研究了一下,发现包 vis
已弃用且不再维护。还有@types/vis
不应再使用,因为新项目 vis.js
提供自己的类型。因此,要开始工作,您需要执行以下操作:
npm r vis @types/vis
npm i vis-data
然后您将获得正确的包类型。例如DataView
构造函数具有以下类型:
constructor(data: DataInterface<Item, IdProp>, options?: DataViewOptions<Item, IdProp>);
因此您可以保持代码不变:
const nodesView = new DataView(nodes_set, {});
const edgesView = new DataView(edges_set, {});
其中第二个参数是DataViewOptions
具有以下类型:
export interface DataViewOptions<Item, IdProp extends string> {
fieldId?: IdProp;
filter?: (item: Item) => boolean;
}
作为旁注,我看到您正在使用 Angular,vis 包也有自己的 Angular 包装器。也许您可以看看它是否适合您的项目:https://github.com/visjs/ngx-vis
关于angular - 安装@type/vis和vis后定义DataView时发生冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60495574/