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