Question

我尝试使用D3将CSV excel文件解析为表格。我知道代码＆＃34;工作＆＃34;因为这适用于我老师的浏览器（也是它的在线代码，所以它适用于其他人）;但是当我尝试运行相同的代码时，浏览器中不会弹出任何表格。我试过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并弹出选项卡。在右上方我注意到x有一个2，所以很明显我有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

Answer 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文件不包含＆＃34; data.csv＆＃34;第一行上的文本，因为这将是格式错误的csv文件。

使用D3解析我的CSV

1 个答案: