开发者问题收集

使用 D3 解析我的 CSV

2016-11-08
3222
javascript html excel csv d3.js

我尝试使用 D3 将 CSV excel 文件解析为表格。我知道代码“有效”，因为这在我老师的浏览器上有效（也是在线代码，所以对其他人有效）；但是当我尝试运行相同的代码时，浏览器中没有弹出任何表格。我试过在 Chrome 和 Edge 上。我的老师在 Chrome 上运行它，它对他有效（他有 Mac，我有 Windows 10）。无论如何，寻求一些帮助，以了解为什么这可能不起作用。考虑到这不起作用，除了这个之外，还有其他人可以帮助我解析 excel 表的数据吗？ 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            table {
                border-collapse: collapse;
                border: 2px black solid;
                font: 12px sans-serif;
            }

            td {
                border: 1px black solid;
                padding: 5px;
            }
        </style>
    </head>
    <body>

         <script src="https://d3js.org/d3.v4.min.js"></script>
<!--        <script src="d3.min.js?v=3.2.8"></script>-->

        <script type="text/javascript"charset="utf-8">
            d3.text("data.csv", function(data) {
                var parsedCSV = d3.csvParseRows(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; });
            });
        </script>
    </body>
</html>

CSV 文件： 

data.csv
car name,miles/gallon,cylinders,displacement,horsepower,weight,acceleration,model year,origin
"chevrolet chevelle malibu",18,8,307,130,3504,12,70,1
"buick skylark 320",15,8,350,165,3693,11.5,70,1
"plymouth satellite",18,8,318,150,3436,11,70,1

我也刚刚尝试在本地下载 .js 文件，更改 javascript 文件的本地安装代码，但仍然不起作用。所以这两个选项对我来说都不起作用。 该网站是： d3js

编辑：现在我已经使用更新后的代码在 Web 浏览器中打开了 index.html ，如下所示。没有像往常一样弹出任何内容，因此我 右键单击：检查 ，然后弹出选项卡。在右上角，我注意到 x 带有 2，因此显然我有 2 个错误。我单击它并得到了以下信息：

XMLHttpRequest 无法加载：file:///C:/Users/John/Desktop/table/data.csv 跨源请求仅支持以下协议方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。

未捕获的 TypeError：无法读取 null 的属性“length”

均在 d3.v4.min.js:6

2个回答

我不能确定在其他浏览器中尝试的代码是否相同；但是，我相信您已经使用 d3.js v4 进行了一项更改 

         <script src="https://d3js.org/d3.v4.min.js"></script>

其命名空间与以下略有不同： 

         <script src="d3.min.js?v=3.2.8"></script>

使用 d3v4 时，您应该使用： 

d3.csvParseRows

而不是： 

d3.csv.parseRows

来自 https://github.com/d3/d3/blob/master/CHANGES.md :

every symbol in D3 4.0 now shares a flat namespace rather than the nested one of D3 3.x. For example, d3.scale.linear is now d3.scaleLinear, and d3.layout.treemap is now d3.treemap.

  • 我假设您的 csv 文件在第一行不包含“data.csv”文本，因为那将是格式错误的csv 文件。
Andrew Reid
2016-11-08

尝试使用本地服务器运行，而不是 C:// 或 file://。 即通过浏览器打开 html 文件。

其他帖子中描述的问题： 加载本地文件时出现“跨源请求仅支持 HTTP。”错误

Suyash
2021-11-28