在Angular 2中创建线时的D3形误差.根据Mike Bostock的文章，

Question

我正在尝试实现D3 V4线图，但是在Angular 2中进行此操作。

我已经安装了D3 V4和所需的键入。从我的package.json提取：

"@types/d3": "^4.9.0",
"@types/d3-array": "^1.2.0",
"@types/d3-axis": "^1.0.8",
"@types/d3-scale": "^1.0.6",
"@types/d3-shape": "^1.2.0",
"@types/d3-time-format": "^2.0.5",
...
"d3": "4.9.0",
"d3-array": "^1.2.0",
"d3-axis": "^1.0.8",
"d3-scale": "^1.0.6",
"d3-shape": "^1.2.0",
"d3-time-format": "^2.0.5",

但是，我在尝试创建line变量时会收到错误，因为它预期的是[number, number]，但是根据指南，我需要在此处传递一个数据，以便它可以拾取日期和值。我的代码是：

var line = d3Shape.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });

这两个错误是：

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

其他人是否遇到了此错误，并且知道如何解决？

Answer 1

我以前曾经经历过，因为打字，这很困惑。我正在使用Angular 4.X，并遇到了同样的问题。解决方案仅仅是为了使打字稿了解类型和仿制药来营救的类型：

首先声明D3线的数据类型：

export type LineData = { date: any, value: any };

然后使用以下的通用方法使用它：

var line = d3Shape.line<LineData>()
    .x(function(d) { return this.x(d.date); })
    .y(function(d) { return this.y(d.value); });

希望有帮助！