angular - D3折线图，预期数字显示数字和NaN

Question

我这里有一个笨蛋 - https://plnkr.co/edit/NNjlIr?p=preview

我正在尝试使用 Angular 和 D3 创建一个简单的折线图。

在我的示例中，控制台显示数据但图表不显示线条

我在控制台中收到错误消息。

Error: attribute d: Expected number, "MNaN,3LNaN,8LNaN,…".

NaN 似乎用 NaN 显示了正确的数字

谁能告诉我我做错了什么？

private drawLine() {

    console.log(this.data);

    this.valueline = d3.line()
        .x((d) => { return d['date']; })
        .y((d) => { return d['total'] });

    this.g.append('path')
        .datum(this.data)
        .attr("class", "path")
        .attr("fill", "none")
        .attr("stroke", "red")
        .attr("stroke-width", 1.5)
        .attr("d", this.valueline(this.data));

}

Answer 1

你必须使用你的秤(this.x 和 this.y):

this.valueline = d3.line()
    .x((d) => { return this.x(d['date']); })
    .y((d) => { return this.y(d['total']) });

如果没有比例尺，您会将诸如 "2012-03-20" 之类的内容传递给 SVG 路径的 "d" 属性，这毫无意义。

这是更新的插件:https://plnkr.co/edit/S9UejrvcgVE9yhIHUbkE?p=preview