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是每行的第一个条目时，rects具有适当的宽度，但不打印其他属性。

错误是什么？

Answer 1

您的第一个问题是您的csv文件在每个逗号后面都有空格。这是一个格式错误的文件，在真csv个文件中空格是分隔符非逗号空格。

第二个问题是d3无法将您的数据自动转换为特定类型。通常，您提供https://www.launchacademy.com/codecabulary/learn-rails/writing-forms来将数据转换为正确的格式。你的看起来可能是这样的：

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

  ...

row conversion function

d3只读取csv的第一个属性

1 个答案: