創建一個從CSV數組與D3.js庫

Question

使用我有這樣的CVS

<script id="cur_data" type="text/csv">Russian Federation,Italy,France,Luxembourg,Greece,Japan,Others 
293,302,91,7,7,7,53</script> 

我怎麼能創造出適合d3.js庫陣列格式？

Answer 1

將它保存爲異步加載的單獨CSV文件可能會更好。因此，保持你的數據在data.csv，然後使用d3::csv()像這樣加載：

d3.csv("data.csv", function(data){ 
    console.log(data); 
}); 

---

如果你真的希望它在<script>標籤雖然，把它放在一個數組或任何數據結構是合適的。

<script> 
    var data = [ 
     { 
      country: "Russian Federation", 
      value: 293 
     }, 
     { 
      country: "Italy", 
      value: 302 
     }, 
     { 
      country: "France", 
      value: 91 
     }, 
     { 
      country: "Luxembourg", 
      value: 7 
     }, 
     { 
      country: "Greece", 
      value: 7 
     }, 
     { 
      country: "Japan" 
      value: 7 
     }, 
     { 
      country: "Others", 
      value: 53 
     } 
    ]; 
</script> 

然後使用d3.js函數中的數據。您通常不會使用type="text/csv"製作<script>標籤。因爲它主要只用於JavaScript，所以你會使用text/javascript。見MDN script tag documentation

Answer 2

CSV是不容易解析（可選報價，逃脫字符，分離不歸（選項卡，逗號，分號...）），你應該使用一個圖書館（D3有）

var csvSource = document.querySelector("#cur_data").textContent; 
var data = d3.csv.parse(csvSource);