Question

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

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

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

我在控制台中收到错误。

错误：属性d：预期号码，＆＃34; MNaN，3LNaN，8LNaN，......＆＃34;。

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"属性，这没什么意义。

以下是更新的plunker：https://plnkr.co/edit/S9UejrvcgVE9yhIHUbkE?p=preview

Answer 2

请参考以下链接，这提供了很多实施， D3Js with Angular 2

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

2 个答案: