javascript - 试图通过使用 d3 或任何其他方式找到一种在 html/js 中获取 csv 的行名和列名的方法？

Question

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

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

Answer 1

"I want to find a way to parse the row and col names as variables"

CSV 中没有行名称，只有列(标题)名称。

如果我正确理解您的问题，您想要获取 列名称，它们是 CSV 中的标题。你现在正在使用什么，csv.parseRows , 将不起作用，因为它将返回 every 行作为数组。因此，要获取列名称(同样，如果我正确理解您想要什么)，解决方案很简单:

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

因此，如果您的 CSV 是这样的:

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

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

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

检查此代码段(我正在使用 <pre> 写入数据，因为我无法在 S.O. 代码段中加载外部 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>