Question

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

首先，我的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");

第二期：我的追加路径命令也有问题：

svgLine(lineData)如下错误：

类型的论证＆＃39; {＆＃34; x＆＃34;：数字; ＆＃34; y＆＃34;：数字; } []＆＃39;不能分配给＆＃39; [数字，数字] []＆＃39;类型的参数。输入＆＃39; {＆＃34; x＆＃34;：数字; ＆＃34; y＆＃34;：数字; }＆＃39;不能指定类型＆＃39; [数字，数字]＆＃39;。财产＆＃39; 0＆＃39;缺少类型＆＃39; {＆＃34; x＆＃34;：数字; ＆＃34; y＆＃34;：数字; }＆＃39;

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

Answer 1

查看D3 v3的type definitions，注意到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");以将线生成器初始化为适当的类型：

C:\Program Files\WindowsPowerShell\Modules

错误：属性＆＃39; x＆＃39;类型＆＃39; [数字，数字]＆＃39;不存在

1 个答案: