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

Question

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

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

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

我在控制台中收到错误。

错误：属性 d：预期数字，“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

Answer 2

请参考下面的链接，这提供了很多实现， D3Js with Angular 2