试图找到一种方法来使用 d3 在 html/js 中获取 csv 的行名和列名，还有其他方法吗？答案

【问题标题】：Trying to find a way to get the row and column names of csv in html/js by using d3 , any other ways?试图找到一种方法来使用 d3 在 html/js 中获取 csv 的行名和列名，还有其他方法吗？
【发布时间】：2017-04-18 15:05:11
【问题描述】：

 <input type="file" id="files" name="files[]"    onchange="handleFileSelect()" />

这是我对 csv 文件的输入，我想找到一种方法将行和列名称解析为变量并在另一个脚本中使用它们到目前为止我有这个 3 脚本 src="d3.min.js?v=3.2.8">

    <script type="text/javascript"charset="utf-8">                          
        d3.text("data.csv", function(data) {                                
            var parsedCSV = d3.csv.parseRows(data);                         

            var container = d3.select("body")                               
                .append("table")                                            

                .selectAll("tr")                                            
                    .data(parsedCSV).enter()                                
                    .append("tr")                                           

              .selectAll("td")                                        
                    .data(function(d) { return d; }).enter()                
                    .append("td")                                           
                    .text(function(d) { return d; });                       
        });

有没有其他方法可以做到这一点，还是我必须将容器以及行和列移植到新脚本中？

【问题讨论】：

标签： javascript html csv d3.js

【解决方案1】：

“我想找到一种方法将行和列名称解析为变量”

CSV 中没有行名称，只有列（标题）名称。

如果我正确理解您的问题，您希望获得列名，它们是 CSV 中的标题。您现在使用的csv.parseRows 将不起作用，因为它会将每一行作为数组返回。因此，要获取列名（同样，如果我正确理解您想要的内容），解决方案很简单：

当您使用 d3.csv 加载 CSV 时，D3 v4.x 会自动创建一个名为 columns 的数组属性，其中包含按输入顺序的标题名称。

所以，如果您的 CSV 类似于：

foo,bar,baz
12,42,31
11,23,56
//etc...

例如，当您将其加载到名为 data 的变量中时，data.columns 将是一个带有标题名称的数组：

["foo", "bar", "baz"]

检查这个 sn-p（我正在使用<pre> 写入数据，因为我无法在 S.O. sn-ps 中加载外部 CSV）：

var data = d3.csvParse(d3.select("#csv").text());
console.log(data.columns);

pre {
  display: none;
  }

<script src="https://d3js.org/d3.v4.min.js"></script>
<pre id="csv">
Device Name,Platform,OS Version,Portrait Width,Landscape Width,Release Date
Acer Iconia Tab A1-810,Android,4.2.2,768,1024,2013-05
Acer Iconia Tab A100,Android,4.0.3,800,1280,2011-04
Acer Iconia Tab A101,Android,3.2.1,600,1024,2011-05
Acer Iconia Tab A200,Android,4.0.3,800,1280,2012-01
Acer Iconia Tab A500,Android,4.0.3,648,1280,2011-04
Acer Iconia Tab A501,Android,3.2,800,1280,2011-04
ACER Liquid E2,Android,4.2.1,360,640,2013-05
</pre>

【讨论】：