Программно создать линейный график d3

Question

Чтобы добавить фактическую линейную диаграмму в svg, обычно это делают с помощью d3:

g.append("path")
    .datum(data)
    .attr("fill", "none")
    .attr("stroke", "#9500ff")
    .attr("stroke-linejoin", "round")
    .attr("stroke-linecap", "round")
    .attr("stroke-width", 2)
    .attr("d", line);

Я хочу создать эту деталь, используя шаблоны VueJS.

Для элемента пути,Я получил это:

path(fill="none" stroke="#9500ff" stroke-linejoin="round" stroke-linecap="round" :stroke-width="2" :d="line(chartData)")

Поскольку у меня нет функции .datum(), доступной, как в обычном методе d3, я попытался передать данные непосредственно в функцию, которая находится за переменной line.

Он просто генерирует это:

<path data-v-2f6361d3="" fill="none" stroke="#9500ff" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" d="MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaN"></path>

---

Вот мой фактический код:

  public get chartData() {
    return this.data.map((entry) => {
      return {
        date: new Date(entry.date),
        value: entry.value,
      };
    });
  }

  public get x() {
    return d3
      .scaleTime()
      .rangeRound([10, this.width])
      .domain(d3.extent(this.chartData, (d: object) => { return d.date; }));
  }

  public get y() {
    return d3
      .scaleLinear()
      .rangeRound([this.height, 0])
      .domain(d3.extent(this.chartData, (d: object) => { return d.value; }));
  }

  public get line() {
    return d3
      .line()
      .x(d => this.x(d.date))
      .y(d => this.y(d.value));
  }

Я что-то здесь пропускаю?