Question

我正在使用D3.js折线图，我使用以下代码获取数据：

// Get the data
d3.tsv("data2.tsv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close; // 1st line of data
        d.open = +d.open; // 2sd line of data
    });

    ...

}

这是我在tsv中的数据文件：

date    close   open
1-May-12    58.13   34.12
30-Apr-12   53.98   45.56
27-Apr-12   67.00   67.89
26-Apr-12   89.70   78.54
25-Apr-12   99.00   89.23
24-Apr-12   130.28  99.23
23-Apr-12   166.70  101.34

我想创建一个小部件，在我的Graph上生成带有任意行数的图形（而不是硬编码的两条线，如图所示）。

如何在同一个foreach子句中处理任意数量的数据系列（参见代码）？

Answer 1

只处理数据并假设日期总是存在（否则，将用于x轴的是什么？）：

d3.tsv("data2.tsv", function(error, data) {
    //create array of all the none date keys
    var keyArray = d3.keys(data[0]).filter(function(key){ return key != 'date'; });

    //iterate over every row from the tsv
    data.forEach(function(row) {
        //cast date as a datetime
        row.date = parseDate(row.date);

        //cast everything else as a number
        keyArray.forEach(function(key){ row[key] = +row[key]; });
    });

    ...

});

使用硬编码列名称绘制和着色几行：https://gist.github.com/mbostock/3884955

d3.js折线图 - 需要加载任意数量的数据系列

1 个答案: