D3.js 用数组替换 tsv 文件答案

【问题标题】：D3.js replace a tsv file with an arrayD3.js 用数组替换 tsv 文件
【发布时间】：2017-06-03 10:15:24
【问题描述】：

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

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

【问题讨论】：

标签： javascript html d3.js

【解决方案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
    }
}];

【讨论】：