解析CSV文件

我是d3.js的新手。我想要做的只是在我的分區映射中顯示功能分類結果（just like this）。解析CSV文件

理想情況顯示category在最內圈;此外，gene full names被呈現在最外圈中。

目前，我有一組CSV格式的數據。下一步是將其轉換爲JSON格式。

考慮數據格式（VFs.csv）：

Name,Category 
CT396,"Adherence" 
htpB,"Adherence" 
msbA,"Adherence" 
rfaE,"Adherence" 
flgK,"Motility" 
flhA,"Motility" 
fliF,"Motility" 
...

我試圖做到這一點：

d3.csv("VFs.csv", function(d) { 
    return { 
     gene : d.Name, 
     Category : d.Category, 
     time : 1 
    }; 
});

爲D3分區插件

格式要求：

var data = { 
     "data": [{ 
     "Category": "Adherence", 
      "data": [{ 
      "gene": "CT396", 
      "time": 1 
     }, { 
      "gene": "htpB", 
      "time": 1 
     }, { 
      "gene": "msbA", 
      "time": 1 
     }, { 
      "gene": "rfaE", 
      "time": 1 
     }] 
    }, { 
     "Category": "Motility", 
      "data": [{ 
      "gene": "flgK", 
      "time": 1 
     }, { 
      "gene": "flhA", 
      "time": 1 
     }, { 
      "gene": "fliF", 
      "time": 1 
     }] 
    }] 
};

這裏是什麼我到目前爲止。（Demo Link）

JSON輸入爲手動創建但我不知道如何從CSV格式構建分層JSON對象。

我感謝任何幫助！

來源

2017-05-03 Yi-Ting Liu

*「D3的JSON格式」* ...根本不存在。 –

您可以使用d3.nest輕鬆做到這一點。

但是，由於您希望將這些屬性名稱設置爲期望的結果，因此可以使用forEach,filter和map的組合創建數據陣列。

這是演示。在執行console.log結果符合您的data.data陣列：

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

 
var data = []; 
 
[...new Set(csv.map(d => d.Category))].forEach(d => { 
 
    data.push({ 
 
    Category: d, 
 
    data: csv.filter(e => e.Category === d).map(f => 
 
     ({ 
 
     gene: f.Name, 
 
     time: 1 
 
     })) 
 
    }); 
 
}) 
 

 
console.log(data)

pre { 
 
    display: none; 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<pre id="csv">Name,Category 
 
CT396,"Adherence" 
 
htpB,"Adherence" 
 
msbA,"Adherence" 
 
rfaE,"Adherence" 
 
flgK,"Motility" 
 
flhA,"Motility" 
 
fliF,"Motility"</pre>

PS：我使用一個<pre>元素來存儲您的CSV。

來源

2017-05-03 06:47:37

感謝您的回覆。這裏隱藏着什麼信息？ '[...新]＃ –

沒有任何信息隱藏在任何地方。這是獲取數組中唯一值的一種方式：https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set –

感謝您的詳細信息。我只是檢查，它完美的工作！ :) –

試試這個 var data = [];

d3.csv("VFs.csv", function(d) { 
    data.push({ 
     Category: d.Category, 
     data: [{ 
     gene: d.gen, 
     time: 1 
     }] 
    }) 
})

來源

2017-05-03 05:51:19

解析CSV文件

回答

相關問題