我一直在尝试实现以下 chart ,没有使用 d3.tsv,因为我从另一个来源获取数据。
按照其他类似 question 中的说明,我尝试替换这部分代码:
d3.tsv("data.tsv", type, function(error, data) {
if (error) throw error;
var cities = data.columns.slice(1).map(function(id) {
return {
id: id,
values: data.map(function(d) {
alert(d.date);
alert(id);
return {date: d.date, temperature: d[id]};
})
};
});
与:
var data=[
{date:20111001,temperature:{New York:63.4,San Francisco:62.7,Austin:72.2}},
{date:20111001,temperature:{New York:58.0,San Francisco:59.9,Austin:67.7}}
.
.
.
];
但是我得到了错误:
SyntaxError: missing : after property id
这种图表的正确格式是什么?
最佳答案
因为这是 TSV 文件的结构:
date New York San Francisco Austin
20111001 63.4 62.7 72.2
20111002 58.0 59.9 67.7
20111003 53.3 59.1 69.4
它会被d3.tsv
函数(连同row函数)解析成一个对象数组,结构如下:
[{
"date": "2011-09-30T14:00:00.000Z",
"New York": 63.4,
"San Francisco": 62.7,
"Austin": 72.2
}, {
"date": "2011-10-01T14:00:00.000Z",
"New York": 58,
"San Francisco": 59.9,
"Austin": 67.7
}, {
"date": "2011-10-02T13:00:00.000Z",
"New York": 53.3,
"San Francisco": 59.1,
"Austin": 69.4
},{
...
}]
这必须是您的 data
变量的结构。
注意:这里的日期已经解析过了。如果您要使用原始值,请解析 data
数组中的日期(例如,使用 forEach
)。
PS:在您的数组中,New York
和 San Francisco
不是有效的属性名称。你应该为他们使用逗号:
var data = [{
date: 20111001,
temperature: {
"New York": 63.4,
"San Francisco": 62.7,
Austin: 72.2
}
}, {
date: 20111001,
temperature: {
"New York": 58.0,
"San Francisco": 59.9,
Austin: 67.7
}
}];
关于javascript - D3.js 用数组替换 tsv 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41729513/