Question

所以我发现了一些将csv转换为HTML表格的javascript库：

https://bl.ocks.org/ndarville/7075823

为了测试这一点，我复制了他们的代码并尝试使用我的csv文件，但是没有用，所以我只是尝试了他们的代码，看看我是否可以产生相同的结果。在浏览器中打开它时，我的index.html中没有弹出任何内容。我的老师能够打开他的工作并生产同样的东西。然后他将文件压缩并发送给我，我打开了他的文件，也没有任何效果。我尝试从他们的网站导入JS以及在本地下载和运行它。两者都没有用，所以我开始认为这可能是Windows 10的错误？

这是他们的代码，应将以下文件转换为表index.html：

<!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="http://d3js.org/d3.v3.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.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; });
            });
        </script>
    </body>
</html>

这是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

任何人都可以帮我吗？非常感谢！

编辑：我去了http://d3js.org/d3.v3.min.js并弹出了库，所以这不是问题

Answer 1

我复制了两个文件：

tmp
|- index.html
|- data.csv

然后我使用http-server

在此文件夹上启动了一个服务器

http-server .

以下是Chrome / Edge / Firefox（Windows 10）上http://localhost:8080的结果：

为了允许d3访问data.csv，您需要在服务器上使用允许在http://whatever/data.csv下载该路径的路线。从文件系统中打开index.html将无法在Chrome / Edge上运行，但它适用于Firefox。

使用Javascript将CSV导出为HTML

1 个答案: