Javascript d3只读取csv的第一个属性

期望的结果

需要完全访问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;})
    });

在这种情况下，

启动

属性打印在屏幕上，但矩形的宽度为0

当

numb

是每行的第一个条目时，矩形具有适当的宽度，但不打印其他属性

---

错误是什么？

您的第一个问题是

csv

文件的每个逗号后都有空格。这是一个格式错误的文件，在真正的

csv

文件中空格是分隔符而不是逗号空格

第二个问题是，

d3

不会自动将数据转换为特定类型。通常，您需要提供一个将数据转换为正确格式的方法。你的可能是这样的：

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); 

  ...

---

您的第一个问题是您的

csv

文件在每个逗号后都有空格。这是一个格式错误的文件，在真正的

csv

文件中空格是分隔符而不是逗号空格

第二个问题是，

d3

不会自动将数据转换为特定类型。通常，您需要提供一个将数据转换为正确格式的方法。你的可能是这样的：

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); 

  ...

---

我错误地认为空白被忽略了。异常必须是

\n

，它将用作新行的标识符。谢谢你的提示。这行代码开始了：d.started=='True'很有趣。started的值将转换为布尔值，这很好。但是，默认值将为False，因为字符串不等于布尔值，对吗？本例中的===没有将

started:value

赋值为True，它通过===为False将其从字符串转换为布尔值，将该键转换为布尔值。@Naltroc，我不确定我是否理解您的问题，

d.started==='True'

是字符串到字符串的比较：

'True'=='True'

（这是

True

）或者

'False'=='True'

（即

False

）。好的<代码>'True'在引号中，我没有确认。因此，这是一个字符串到字符串的比较，它继续比较字符串内容，匹配项返回True，否则返回False，并指定返回值的属性。我错误地认为空白被忽略了。异常必须是

\n

，它将用作新行的标识符。谢谢你的提示。这行代码开始了：d.started=='True'很有趣。started的值将转换为布尔值，这很好。但是，默认值将为False，因为字符串不等于布尔值，对吗？本例中的===没有将

started:value

赋值为True，它通过===为False将其从字符串转换为布尔值，将该键转换为布尔值。@Naltroc，我不确定我是否理解您的问题，

d.started==='True'

是字符串到字符串的比较：

'True'=='True'

（这是

True

）或者

'False'=='True'

（即

False

）。好的<代码>'True'在引号中，我没有确认。因此，这是一个字符串到字符串的比较，它继续比较字符串内容，匹配项返回True，否则返回False，并指定返回值的属性。戈奇亚。