Question

我的d3多线图表示问题。我想使用this representation。代码为here。

问题是我的cvs与本例中的cvs不同。我的csv采用以下格式：

 MarketAcq NameMarket -5    -4    -3      -2      -1   0   1   2   3   4   5
 Mining    IronEsc    -0.5% 3.4% 2.1% -4.2% -2.5% 4.4% 6.1% -8.2% 1.4% 2.1% -4.2%

MarketAcq代表市场类型，nameMarket是公司名称。 -5 -4 -3 -2 -1 0是收购该公司前的股票走势，1 2 3 4 5是收购该公司后的股票走势。

我的目标是从这个csv创建一个多线图，它在x轴-5 -4 -3 -2 -1 0 1 2 3 4 5和y轴上的百分比值和图例中的名称公司

我有一个MarketAcq过滤csv并仅为指定MarketAcq的公司创建多线图。

问题在于这一部分，因为我找不到适合我情况的解决方案：

d3.csv("data/crunchbase-quarters.csv", function (error, data) {  
        var labelVar = 'quarter';  
        var varNames = d3.keys(data[0]).filter(function (key) { return key !== labelVar;});                  
        color.domain(varNames);  
        var seriesData = varNames.map(function (name) {   
          return {  
            name: name,  
            values: data.map(function (d) {  
              return {name: name, label: d[labelVar], value: +d[name]};  
            })  
          };  
        });  
        x.domain(data.map(function (d) { return d.quarter; }));  
        y.domain([  
          d3.min(seriesData, function (c) {   
            return d3.min(c.values, function (d) { return d.value; });  
          }),  
          d3.max(seriesData, function (c) {   
            return d3.max(c.values, function (d) { return d.value; });  
          })
        ]);

有没有人可以帮我解决这个问题？

Answer 1

因为你的＆＃34; csv＆＃34;数据不是真正的CSV（逗号分隔）或TSV（制表符分隔）你想以某种方式解析原始字符串或修改你的数据格式以适应D3可以解析的任何数据格式，例如：

MarketAcq;NameMarket;-5;-4;-3;-2;-1;0;1;2;3;4;5
Mining;IronEsc;-0.5%;3.4%;2.1%;-4.2%;-2.5%;4.4%;6.1%;-8.2%;1.4%;2.1%;-4.2%

如果你不能或不做，请尝试这样的事情：

d3.text('data.csv', 'text/plain', function(error, response) {
    var lines = response.split('\n');
    for (var i = lines.length - 1; i >= 0; i--) {
        lines[i] = lines[i].trim().split(/\s+/).join(' ');
    };

    var headers = lines.shift().split(' ');
    var data = new Array(lines.length);
    for (var i = 0; i < lines.length; i++) {
        data[i] = {};
        var items = lines[i].split(' ');
        for (var x = 0; x < headers.length; x++) {
            data[i][headers[x]] = items[x];
        }
    };

    console.log(data);
});

来自csv的D3中的多个折线图

1 个答案: