Javascript 绘制d3折线图时分析数据时出错

Javascript 绘制d3折线图时分析数据时出错,javascript,d3.js,Javascript,D3.js,我试图绘制一个差异图表(),但使用了一种更模块化的风格 到目前为止,我已经读取了两个虚拟CSV文件,组合数据,生成了一个图表,现在我正试图从数据的一部分中画一条线,但我一直得到一个错误 错误是: 错误:解析问题d=“M0221.73913043478262LNaN,182.6086955217394LNAN,195.6521739130435LNaN,156.52173913043478L500,91.30434782608697L500,91.30434782608697LNaN,156.52

我试图绘制一个差异图表(),但使用了一种更模块化的风格

到目前为止,我已经读取了两个虚拟CSV文件,组合数据,生成了一个图表,现在我正试图从数据的一部分中画一条线,但我一直得到一个错误

错误是:

错误:解析问题d=“M0221.73913043478262LNaN,182.6086955217394LNAN,195.6521739130435LNaN,156.52173913043478L500,91.30434782608697L500,91.30434782608697LNaN,156.52173913043478LNaN,195.6521739130435LNaN,182.6086955217394L0221.739130478262Z”

执行此操作时会发生以下情况:

g.select('.line').attr('d', line);
此时(如控制台中所示),
数据为:

[{"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}]
[0, 500]
[1999, 2003]
[300, 0]
[9, 32]
xScale.range()是:

[{"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}]
[0, 500]
[1999, 2003]
[300, 0]
[9, 32]
xScale.domain()是:

[{"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}]
[0, 500]
[1999, 2003]
[300, 0]
[9, 32]
yScale.range()是:

[{"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}]
[0, 500]
[1999, 2003]
[300, 0]
[9, 32]
yScale.domain()
是:

[{"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}]
[0, 500]
[1999, 2003]
[300, 0]
[9, 32]

我猜其中某个地方有一个简单的错误,这意味着使用了错误的数据来划定界限,但经过几个小时的努力,我看不出我做错了什么。

您使用的是顺序标度,它不会在值之间插值。该比例域由两个元素组成,它将这些元素映射到输出范围中的两个元素。也就是说,1999年映射为0,2003年映射为500。对于任何其他输入,刻度将返回NaN,因为该值不在其输入域中

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


或者,您可以使用时间刻度,因为它可能会为您提供更好的标签。

路径数据中的那些NaN值似乎是问题的根源。可能是
Y()
函数有问题。但是,不要花太多时间,而是说出确切的问题。想建立一个JSFIDLE吗?感谢您查看Khôi,但是Lars找到了解决方案。当您知道如何设置JSFIDLE时,非常简单,谢谢Lars!出于某种原因,我一直认为域是最小值和最大值,但没有意识到顺序尺度的不同。再次感谢您抽出时间。