d3只读取csv的第一个属性

d3 reads only first property of csv

本文关键字：第一个 属性 csv 读取 d3      更新时间：2023-09-26

所需结果

需要完全访问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是每行的第一个条目时，矩形具有适当的宽度，但不打印其他属性。

错误是什么

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

第二个问题是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); 
  ...

修复这些问题，您的可视化开始成形

对于自定义分隔符，您可以使用：

d3.dsv(', ')("your_file.csv", function(error, data){
   ...
}

安装：

npm install d3-dsv

对我有效的解决方案是使用函数"读取csv；那么"；。

d3.csv("../../data/TA_CH_3.csv").then(function (data) {
console.log(data);
});

我还必须提到，我没有逗号和空格的问题，如上所述。但它仍然只读取一行，这个函数修复了它。

相关文章：