javascript - d3线形图形，从对象而不是CSV获取数据

我正在尝试从此处复制图形：

http://bl.ocks.org/mbostock/1166403

唯一的区别是，我不是从csv文件中获取数据，而是从js对象中获取数据。

像这样的数据：

symbol,date,price
S&P 500,Jan 2000,1394.46
S&P 500,Feb 2000,1366.42
S&P 500,Mar 2000,1498.58

我将其转换为：

var data = [{"symbol":"S&P 500","date":"Jul 2002","price":"1.63"},
{"symbol":"S&P 500","date":"Aug 2002","price":"7.63"},
{"symbol":"S&P 500","date":"Sep 2002","price":"7.23"}];

并尝试将数据值映射到line（），如下所示：

var line = d3.svg.line()
    .interpolate("monotone")
    .x(data.map(function(d) { return x(d.date); }))
    .y(data.map(function(d) { return y(d.price); }));

但是我仍然得到的路径不是NaN错误：

https://jsfiddle.net/buh6dLg9/

d.date返回预期的结果，但我不明白为什么会这样
 x(d.date)

bl.ocks.org上的许多示例都在使用外部文件，我想看看如何使用对象中的数据。

谢谢！

最佳答案

您所缺少的是使用功能type（反过来又称为日期解析器功能）将数据从文本解析为正确的格式。只需插入以下行：

data.forEach(type);

关于线轴，您需要恢复为原始代码（不必为您更改）：

var line = d3.svg.line()
    .interpolate("monotone")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.price); });

d.date是您的原始数据，x(d.date)将其转换为图形的x坐标，并且上面的块告诉您数据应使用x和y函数生成坐标。在这一点上，不必考虑数据。

https://jsfiddle.net/2d042rnL/



我一般来说，要使用本地数据而不是外部文件，请查找此行：

d3.csv("readme.csv", type, function(error, data) {
  ...
}

并且您需要对数据进行相同的预处理（此处为type函数），然后调用该函数。我通常会执行以下操作：

process =  function(error, data) {
  ...
}
/* use external file: */
//d3.csv("readme.csv", type, process)
/* use local data: */
data.forEach(type)
process(false, data)