Question

我尝试导入具有以下列顺序的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]));

Answer 1

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

你的代码的基本问题是d3.csv返回一个对象的数组，没有定义对象成员的顺序，这是一个javaScript的东西... < / p>

#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>

D3.js csv文件

1 个答案:

#Working Code