错误：'[number，number]'类型中不存在属性'x'

Posted 2021-05-02

我遇到了创建折线图的问题。

首先，我的return d.x和return d.y不起作用。我收到错误：

Property 'x' does not exist on type '[number, number]' .

接口代码：

export interface TestItem { "x": number, "y": number }

样本数据：

let lineData = [{
    "x": 1,
    "y": 5
}, {
    "x": 20,
    "y": 20
}, {
    "x": 40,
    "y": 10
}, {
    "x": 60,
    "y": 40
}, {
    "x": 80,
    "y": 5
}, {
    "x": 100,
    "y": 60
}];

线命令：

let svgLine = d3.svg.line().x(function(d) {
  return d.x;
})
.y(function(d) {
  return d.y;
})
.interpolate("linear");

第二个问题：我的append path命令也有问题：

svgLine(lineData)如下错误：

'{“x”类型的参数：数字; “y”：数字; } []'不能分配给'[number，number] []'类型的参数。输入“{”x“：数字; “y”：数字; }'不能分配给'[number，number]'。类型'{“x”中缺少属性'0'：数字; “y”：数字; }”。

我引用了多个示例，它们都具有相同的代码。所以我不确定问题是什么。

答案

查看type definitions的D3 v3，注意到d3.svg.line()生成器有两种形式：（1）使用默认类型[number, number]或（2）指定自己的类型：

namespace svg {
    export function line(): Line<[number, number]>;   // (1)
    export function line<T>(): Line<T>;               // (2)

由于在语句中创建行生成器时未提供任何类型参数

let svgLine = d3.svg.line()

TypeScript编译器将使用上述情况（1），假设您的数据位于包含两个数字的tuple中。

这显然与lineData中的数据结构冲突，TestItem是一个对象数组，而不是一个明确定义的元组数组。因此，您目击的编译器错误。

从声明中可以看出，解决方法很简单。您可以轻松地传入界面let svgLine = d3.svg.line()<TestItem> .x(function(d) { return d.x; }) .y(function(d) { return d.y; }) .interpolate("linear"); 以将线生成器初始化为适当的类型：

qazxswpoi