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函数（与行函数一起）使用此结构解析为对象数组：

[{
    "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
    }
}];

D3.js用数组替换tsv文件

1 个答案: