时间戳

首页 > 解决方案 > 使用打字稿在可见网络中设置边缘的问题

vis.js - 使用打字稿在可见网络中设置边缘的问题

问题描述

我正在关注 vis 中的动态数据集示例，当我尝试设置边缘时遇到打字错误。

我只有一个边缘数组，看起来像：

edgesArray = [
 { from: 1, to: 3 },
 { from: 1, to: 2 },
 { from: 2, to: 4 },
 { from: 3, to: 5 },
 ]

我将数据设置为

let data = {
  nodes: new vis.DataSet(nodesArray),
  edges: new vis.DataSet(edgesArray)
}

我得到的错误在边缘。

No overload matches this call.
  Overload 1 of 2, '(options?: DataSetInitialOptions<"id">): DataSet<Partial<Record<"id", string | number>>, "id">', gave the following error.
    Type '{ from: number; to: number; } []' has no properties in common with type 'DataSetInitialOptions<"id">'.
  Overload 2 of 2, '(data: Partial<Record<"id", string | number>>[], options?: DataSetInitialOptions<"id">): DataSet<Partial<Record<"id", string | number>>, "id">', gave the following error.
    Argument of type '{ from: number; to: number; } []' is not assignable to parameter of type 'Partial<Record<"id", string | number>>[]'.

我正在使用 vis-network 的 5.2.4 版本。

标签： vis.jsvisnetwork

解决方案

这是标准的 TS 行为。您正在尝试将类型 A 分配给 B 但它们没有任何共同点。DataSet 可以接受具有可选 id 的项目。但是，您的边缘没有 id，并且 TS 只是说您做错了什么。

解决方案一：

import { Edge } from "vis-network";

const edgesArray: Edge[] = [
    { from: 1, to: 3 },
    { from: 1, to: 2 },
    { from: 2, to: 4 },
    { from: 3, to: 5 },
];

解决方案二：

const edgesArray = [
    { id: undefined, from: 1, to: 3 },
    { from: 1, to: 2 },
    { from: 2, to: 4 },
    { from: 3, to: 5 },
];

解决方案三：

const edgesArray: { id?: undefined, from: number, to: number }[] = [
    { from: 1, to: 3 },
    { from: 1, to: 2 },
    { from: 2, to: 4 },
    { from: 3, to: 5 },
];

推荐阅读