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
}

找不到名称“折线”-d3折线图

1 个答案: