javascript - D3.js 用数组替换 tsv 文件

Question

我一直在尝试实现以下 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

这种图表的正确格式是什么？

Answer 1

因为这是 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
    }
}];