Не удается найти имя «линия» - линейный график 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
}