2016-05-17 179 views
3

我正在尋找一些關於如何有效地使用d3.js大量數據的建議。比方說,例如,我有這個數據集從一個原始的.csv文件(從Excel轉換);如何組織/嵌套數據爲d3.js圖表​​輸出

EA 
,Jan_2016,Feb_2016,Mar_2016 
Netherlands,11.7999,15.0526,13.2411 
Belgium,25.7713,24.1374 
France,27.6033,23.6186,20.2142 

EB 
,Jan_2016,Feb_2016,Mar_2016 
Netherlands,1.9024,2.9456,4.0728 
Belgium,-,6.5699,7.8894 
France,5.3284,4.8213,1.471 

EC 
,Jan_2016,Feb_2016,Mar_2016 
Netherlands,3.1499,3.1139,3.3284 
Belgium,3.0781,4.8349,5.1596 
France,16.3458,12.6975,11.6196 

使用csv我想表示這種數據的最佳方式是類似的;

Org,Country,Month,Score 
EA,Netherlands,Jan,11.7999 
EA,Belgium,Jan,27.6033 
EA,France,Jan,20.2142 
EA,Netherlands,Feb,15.0526 
EA,Belgium,Feb,25.9374 
EA,France,Feb,23.6186 
EA,Netherlands,Mar,13.2411 
EA,Belgium,Mar,24.1374 
EA,France,Mar,20.2142 

這似乎很長時間纏繞在我身上,並會花費很多時間。我想知道是否有更簡單的方法來做到這一點?

從我能想到的,我認爲JSON可能是更合乎邏輯的選擇?

對於這種數據將進入什麼樣的圖表環境,我將創建一個餅圖,它可以根據選定的國家/月份更新數據並比較每次三個組織的得分。

(plnk可視化) http://plnkr.co/edit/P3loEGu4jMRpsvTOgCMM?p=preview

感謝您的任何意見,我有點失去了這裏。

+0

這取決於你想要優化什麼...磁盤使用?從原始數據轉換簡單嗎?快速加載?活性餅圖?適合將來添加? – tarulen

+0

他們都聽起來很重要!我認爲從原始數據轉換到適合未來增加的簡單性是最重要的。 – since095

+0

你有沒有嘗試轉換爲你想要的格式?您從excel中獲得的原始csv文件看起來不正確。我的意思是,如果Excel表格頂部的值是日期,那麼左邊的國家和中間的值不應該是第一個值(2016年1月之前)爲空? – thatOneGuy

回答

3

我會說你提出的中間步驟是一個很好的保持組織在內存中的一切。您不必通過csv文件,只需加載原始csv文件並將其轉換爲對象數組即可。這裏是一個解析器:

d3.text("data.csv", function(error, dataTxt) { //import data file as text first 
var dataCsv=d3.csv.parseRows(dataTxt); //parseRows gives a 2D array 
var group=""; // the current group header ("organization") 
var times=[]; //the current month headers 
var data=[]; //the final data object, will be filled up progressively 
for (var i=0;i<dataCsv.length;i++) { 
    if (dataCsv[i].length==1) { //group name 
     if (dataCsv[i][0] == "") 
      i++; //remove empty line 
     group = dataCsv[i][0]; //get group name 
     i++; 
     times = dataCsv[i];//get list of time headings for this group 
     times.shift(); // (shift out first empty element) 
    } else { 
     country=dataCsv[i].shift(); //regular row: get country name 
     dataCsv[i].forEach(function(x,j){ //enumerate values 
     data.push({ //create new data item 
      Org: group, 
      Country: country, 
      Month: times[j], 
      Score: x 
     }) 
     }) 
    } 
} 

這給出了以下數據數組:

data= [{"Org":"EA","Country":"Netherlands","Month":"Jan_2016","Score":"11.7999"}, 
     {"Org":"EA","Country":"Netherlands","Month":"Feb_2016","Score":"15.0526"}, ...] 

這是國際海事組織最通用的結構,你可以有。雖然不是最好的內存使用。

的簡單方式巢這是以下內容:

d3.nest() 
    .key(function(d) { return d.Month+"-"+d.Country; }) 
    .map(data); 

它將給一個地圖鍵值如:

"Jan_2016-Netherlands":[{"Org":"EA","Country":"Netherlands","Month":"Jan_2016","Score":"11.7999"},{"Org":"EB","Country":"Netherlands","Month":"Jan_2016","Score":"1.9024"},{"Org":"EC","Country":"Netherlands","Month":"Jan_2016","Score":"3.1499"}] 

使用entries代替map有一個陣列,而不是如果要通過僅保留分數數組來簡化數據,請使用rollup函數。此時,將其插入任何d3繪圖工具是相當簡單的。

PS:a Plunker與此腳本的運行代碼。一切都顯示在控制檯中。

+0

嗨 - 這很有道理!非常感謝:)我試圖把它付諸行動,在靜態餅圖中,但我認爲我仍然在努力理解如何使用您創建的腳本。到目前爲止,這裏是一條小路 - 希望我不會離開百萬英里。 http://plnkr.co/edit/1fiXFyl4MFZRrZX7DRCl?p=preview – since095

+0

這裏你去:http://plnkr.co/edit/P2NvhAa6qrNkkvuA2Zvq?p=preview請參閱代碼中的評論。 – tarulen

+0

啊,是的,它變得更清晰了!我已經完成了它(大部分),如果你想看看 - http://plnkr.co/edit/hLBoPsnqeTKwvpXwMJPm?p=preview,我認爲沒關係?或者你認爲可能有更好的方法來構建代碼?另外,想知道是否可以提供關於如何讓圖表在加載時轉換的指針? (對於重複的評論感到抱歉!讓我知道它是否違反規則) – since095