D3.js csv文件中的列顺序错误答案

【问题标题】：D3.js wrong column order in csv fileD3.js csv文件中的列顺序错误
【发布时间】：2015-07-02 11:42:40
【问题描述】：

我正在尝试导入具有以下列顺序的 csv：

country,2004,2008,2012
eu 28 none,,11.1,12.8
eu 28 one language,,35.7,36.6
eu 28 two languages,,53.1,50.6
eu 27 none,8.3,11.2,12.9
eu 27 one language,54.7,35.9,36.7
eu 27 two languages,,52.9,50.3

做完之后

 d3.keys(csv[0])

不知何故，这些列被导入为：

 ["2004", "2008", "2012", "country"]

为什么会这样？我使用列顺序作为应该显示什么符号的鉴别器，所以这对我来说是一个很大的问题。

用到的一些代码

d3.csv( folder + "/" + file, function(csv) { 
    var allheaders = d3.keys(csv[0]);
    console.log(d3.keys(csv[0]));

【问题讨论】：

你能告诉我们一些你用来导入 csv 的代码吗？
加在上面的正文中
键的顺序未定义，这在API docs 中再清楚不过了。关键是这并不重要，因为您可以使用csv[i][column_name] 或csv[i].column_name 获得您想要的。
感谢您的链接。如果我有列名，您的建议会很棒。这将用于从具有几个不同列名的数百个不同 csv 创建几个不同的条形图，所以这是个很大的问题。到目前为止，我一直假设（因为它总是发生）它正在按照我输入的 csv 或 tsv 中写入的顺序导入列

标签： javascript csv d3.js

【解决方案1】：

将其作为文本文件引入，然后您可以利用 d3.cvs.parseRows() 返回数组的事实。这意味着订单将按照原始文本。

你的代码的根本问题是d3.csv返回一个对象的数组，对象成员的顺序没有定义，这是一个javaScript的事情......

#Working Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    div {
      white-space: pre;
    }
    td, th {
      outline: 1px solid white;
      background-color: #ccc;
    }
    th {
      text-align: left;
    }
    td:not(:first-child) {
      text-align: right;
    }
  </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<!--<script src="d3 CB.js"></script>-->
<script>
  d3.text("data.csv", function (text) {
    var csv = d3.csv.parse(text), allheaders = d3.csv.parseRows(text)[0],
      table = d3.select("body").append("table");
    table.append("thead")
      .append("tr").selectAll("th")
      .data(allheaders).enter()
        .append("th")
        .text(function(d){return d});
    table.append("tbody").datum(csv)
        .selectAll("tr")
        .data(function(d){
          return d
        })
          .enter().append("tr")
            .selectAll("td")
            .data(function(row){
              return allheaders.map(function(h) { return row[h]})
            }).enter().append("td")
            .text(function(d) {
              return d
            });
  });
</script>
</body>
</html>

【讨论】：