D3正從多列CSV

Question

數據我下面這個例子爲multi-line graph

我想用值2010年以來，2011年繪製的每個預測在我的CSV，2012年

forecast.csv

forecast,2010,2011,2012 
Outlook,87,88,88 
Reform,50,20,88 
Renewal,43,21,88 

如果我的數據是簡單的像例子中的鏈接，建立圖表的代碼是這樣的：

var priceline = d3.svg.line() 
    .x(function(d) { return x(d.year); }) 
    .y(function(d) { return y(d.value); }); 

var dataNest = d3.nest() 
    .key(function(d) {return d.forecast;}) 
    .entries(data); 

dataNest.forEach(function(d) { 

    svg.append("path") 
     .attr("class", "line") 
     .attr("d", priceline(d.values)); 

      console.log(dataNest) 
}); 

但是我的數據來自多列CSV。

我試圖嵌套預測，所以每個預測都會有一個年份和值對的數組。即

[0] Object 
     [key] Outlook 
     [values] 
     [0] year: 2010 
      value: 28 
     [1] year: 2011 
      value: 88 

但dataNest目前看起來是這樣的

[0] Object 
     [key] Outlook 
     [values] 
     [0] 2010: 87 
      2011: 88 
      2012: 88 

還有許多其他年份的實際數據，因此變調是不是一種選擇。如何從此多列CSV數據中繪製一條線？

Answer 1

您可以更改數據格式或修改d3.nest函數。然而，我認爲最簡單的方法是使用普通的JavaScript修改陣列：

dataNest.forEach(function(d) { 
    d.values.forEach(function(e) { 
     var myArr = []; 
     for (var key in e) { 
      if (e[key] != d.key) { 
       myArr.push({ 
        "year": key, 
        "value": e[key] 
       }); 
      } 
     } 
     d.values = myArr; 
    }) 
}) 

這裏是一個演示，在你的問題使用數據：

var data = d3.csv.parse(d3.select("#csv").text()); 
 

 
var dataNest = d3.nest() 
 
    .key(function(d) { 
 
     return d.forecast; 
 
    }) 
 
    .entries(data); 
 

 
dataNest.forEach(function(d) { 
 
    d.values.forEach(function(e) { 
 
     var myArr = []; 
 
     for (var key in e) { 
 
      if (e[key] != d.key) { 
 
       myArr.push({ 
 
        "year": key, 
 
        "value": e[key] 
 
       }); 
 
      } 
 
     } 
 
     d.values = myArr; 
 
    }) 
 
}) 
 

 
console.log(dataNest)

pre { 
 
    display: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<pre id="csv">forecast,2010,2011,2012 
 
Outlook,87,88,88 
 
Reform,50,20,88 
 
Renewal,43,21,88</pre>