使用 D3 解析我的 CSV答案

【问题标题】：Using D3 To Parse My CSV使用 D3 解析我的 CSV
【发布时间】：2017-03-21 13:45:11
【问题描述】：

我正在尝试使用 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

编辑：所以我现在已经在我的网络浏览器中打开了index.html，其中包含如下注释的更新代码。没有像往常一样弹出，所以我Right-Clicked: Inspect 并弹出标签。在右上角，我注意到带有 2 的 x，所以显然我有 2 个错误。我点击它，我得到了以下信息：

XMLHttpRequest cannot load: file:///C:/Users/John/Desktop/table/data.csv Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Uncaught TypeError: Cannot read property 'length' of null

都在d3.v4.min.js:6

【问题讨论】：

在 chrome 中加载本地文件是一个不同的问题。此处记录了此问题：stackoverflow.com/questions/10752055/…

标签： javascript html excel csv d3.js

【解决方案1】：

我无法确定在其他浏览器中尝试的代码是否相同；但是，我相信您使用 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：

D3 4.0 中的每个符号现在共享一个平面命名空间，而不是 D3 3.x 的嵌套命名空间。例如，d3.scale.linear 现在是 d3.scaleLinear，d3.layout.treemap 现在是 d3.treemap。

我假设您的 csv 文件的第一行不包含“data.csv”文本，因为那将是格式错误的 csv 文件。

【讨论】：

我尝试了原版（我相信是.v3），但还是不行，所以我去了网站，看到了更新的版本，然后换成了.v4 --- 不管怎样，让我保持相同的 .v4 并尝试新代码，看看是否有效。感谢提醒
当我复制你的代码和csv并加载它时，我得到了错误：“d3.csv.parseRows is not a function”，这支持了应该使用d3.csvParseRows的结论。更改它后，您的代码执行没有错误。如果这不是原因，我很难过。
我更改了一行，但没有解决任何问题。我发现了一些可以帮助某人帮助我的东西，现在要编辑主题。不确定它是否真的有帮助，但希望如此！
创建了一个 plunker 来演示/测试（加载需要一秒钟）：plnkr.co/edit/8UAZuVBpAPjwGxHXL1Zz?p=preview

【解决方案2】：

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

其他帖子中描述的问题："Cross origin requests are only supported for HTTP." error when loading a local file

【讨论】：