D3讀取CSV

Question

期望的結果

的test.csv需要爲數據讀取完全訪問的唯一的第一個屬性。

現狀

我提出了一些值的不同的測試用例文件中的周圍。看起來，每一行的第一個條目，不管是什麼類型，都是唯一可以返回的條目。我沒有任何控制檯錯誤。

的CSV

started, numb, eggs, waffles, name, cost 
False, 34, "over easy", True, elle, 22 
True, 24, "scrambled", False, belle, 22 
False, 10, "fortunate", False, jake, 20 

使用線3 console.log(data)表明，對象已被成功地裝入適當的鍵/值。

[1]Object 
" cost": " 22" 
" eggs": " "scrambled"" 
" name": " belle" 
" waffles": " False" 
numb: "24" 

（D3添加周圍的一切報價，看起來像JSON。他們是否被強制轉換爲字符串，或者是報價只是分隔符？）

d3.js

d3.csv("test.csv", function(data) { 

    console.log(data); 

    var canv = d3.select("body").append("svg") 
       .attr("height", 500) 
       .attr("width", 500) 

    canv.selectAll("rect") 
     .data(data) 
     .enter() 
      .append("rect") 
      .attr("height", 15) 
      .attr("width", function(d) { return d.numb}) 
      .attr("y", function(d, i) {return 50 + i * 20}) 
      .attr("fill", "orange") 

    canv.selectAll("text") 
     .data(data) 
     .enter() 
      .append("text") 
      .attr("y", function(d, i) {return 50 + i * 20}) 
      .text(function(d) {return d.started;}) 
    }); 

在這情況下，started屬性在屏幕上打印，但矩形的寬度爲0.

當numb i是每行的第一個條目，這些矩形具有適當的寬度，但不打印其他屬性。

什麼是錯誤？

Answer 1

您的第一個問題是您的csv文件在每個逗號後都有空格。這是一個錯誤格式的文件，在一個真實的csv文件中空格是分隔符不是逗號空格。

第二個問題是d3不會將您的數據自動轉換爲特定類型。通常你會提供一個row conversion function來將數據轉換爲正確的格式。你可能是這樣的：

d3.csv("test.csv", function(d) { 

    return { 
    started: d.started === 'True', 
    numb: +d.numb, 
    eggs: d.eggs, 
    waffles: d.waffles === 'True', 
    name: d.name, 
    cost: +d.cost 
    }; 

}, function(data) { 

    console.log(data); 

    ... 

Fixing these problems up and your visualization start to take shape