Question

我想从这里复制图片：

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中的许多示例都使用外部文件，我想看看如何使用来自对象的数据。

谢谢！

Answer 1

您缺少的是使用函数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和{{1}函数生成坐标。此时，不必考虑数据。

https://jsfiddle.net/2d042rnL/

我很一般，要使用本地数据而不是外部文件，请查找以下行：

并且您需要对数据应用相同的预处理（此处为d3.csv("readme.csv", type, function(error, data) { ... }函数），然后调用该函数。我通常做的是以下几点：

type

d3 line graphic，从Object而不是CSV获取数据

1 个答案: