Question

我正在尝试绘制差异图表（like this one），但使用更模块化的样式。

到目前为止，我已经阅读了两个虚拟CSV文件，结合数据，生成图表，现在我试图从数据的一部分绘制一条线，但我一直在错误。 The full code is available on bl.ocks.org

错误是：

错误：问题解析d = “M0,221.73913043478262LNaN，182.60869565217394LNaN，195.6521739130435LNaN，156.52173913043478L500,91.30434782608697L500,91.30434782608697LNaN，156.52173913043478LNaN，195.6521739130435LNaN，182.60869565217394L0,221.73913043478262Z”

执行此操作时会发生

：

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。

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

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

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

1 个答案: