找不到名称"折线" - d3 折线图

Question

尝试集成 d3 折线图时，显示以下错误。 我正在使用 https://medium.freecodecamp.org/learn-to-create-a-line-chart-using-d3-js-4f43f1ee716b 来创建折线图。

g.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);

这给出了错误：

error TS2304: Cannot find name 'line'.

然后我补充说：

var line = d3.line()
.x(function(d) { return x(d.date)})
.y(function(d) { return y(d.value)})
x.domain(d3.extent(data, function(d) { return d.date }));
y.domain(d3.extent(data, function(d) { return d.value }));

到我的打字稿，导致错误：

error TS2339: Property 'date' does not exist on type '[number, number]'

行代码：

var line = d3.line()
.x(function(d) { return x(d.date)})
.y(function(d) { return y(d.value)})
x.domain(d3.extent(data, function(d) { return d.date }));
y.domain(d3.extent(data, function(d) { return d.value }));

有d3.js..的专家吗？ 提前谢谢。

Answer 1

由于您使用的是打字稿，因此您必须告诉d3传递给line生成器的类型：

var line = d3.line<MyDataType>()
.x(function(d) {return x(d.date);})
.y(function(d) {return y(d.value);});

其中MyDataType是其中一个基准面的定义，如下所示：

interface MyDataType{
date: Date,
value: number
}