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

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