绘制D3折线图时解析数据时出错

Question

我试图绘制一个差异图（ 像这样 ），但是使用了一种更加模块化的样式。

到目前为止，我已经读了两个虚拟的CSV文件，结合了数据，生成了图表，现在试图从一部分数据中画一条线，但是我一直遇到错误。 完整代码可在bl.ocks.org上找到 。

错误是：

错误：解析d =“ M0,221.73913043478262LNaN，182.60869565217394LNaN，195.6521739130435LNaN，156.52173913043478L500,91.30434782608697L500,91.30434782608697LNaN，156.52173913043478LNaN，195.65217391303.6695L182N69,17652

这样做时会发生以下情况：

g.select('.line').attr('d', line);

那时（如控制台所示）， data为：

[{"year":1999,"imports":15,"exports":19},{"year":2000,"imports":18,"exports":20},{"year":2001,"imports":17,"exports":30},{"year":2002,"imports":20,"exports":32},{"year":2003,"imports":25,"exports":9}]

xScale.range()是：

[0, 500]

xScale.domain()是：

[1999, 2003]

yScale.range()是：

[300, 0]

yScale.domain()为：

[9, 32]

我猜那里有一个简单的错误，这意味着使用了错误的数据来画线，但是经过几个小时的尝试来解决这个问题，我看不到我做错了什么。

Answer 1

您正在使用序数刻度，该序数不会在值之间插值。 该比例的域包含两个元素，它将把它们映射到输出范围中的两个元素。 也就是说，将1999映射为0，将2003映射为500。对于任何其他输入，小数位数将返回NaN，因为该值不在其输入域中。

您可以通过指定要在域中映射的所有年份以及范围内的相应输出值来解决此问题。 在您的情况下，最简单的方法是使用线性标尺，尽管这似乎是您假设的当前标尺会发生的情况。 您只需要替换比例的定义以及范围的设置方式即可。 这就是我在这里所做的。

另外，您可以使用时间刻度，因为这样可以为您提供更好的标签。