javascript - 使用 D3 解析我的 CSV

标签 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

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

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

未捕获的类型错误:无法读取 null 的属性“长度”

两者都在d3.v4.min.js:6

最佳答案

我无法确定在其他浏览器中尝试的代码是否相同;但是,我相信您已经使用 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 文件。

关于javascript - 使用 D3 解析我的 CSV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40478334/

相关文章:

javascript - 通过IE、ADODB.Stream将base64文本数据保存为二进制文件到硬盘

html - 我如何在一条直线上获得这些图片?

html - 使用 CSS 制作静态/粘性菜单栏

excel - 检查文本 A 列中的字符串,返回 B 列中的另一个字符串 - Excel

regex - 可以单独提取组的每个出现,但不能作为重复组

javascript - 无法读取未定义的sequelize Express JS 的属性 'findAll'

javascript - 使用以下内容解析时,第一个值返回 "undefined"

javascript - 如何使用 Redux 来表示 Material UI Drawer?

javascript - 为基于 html/javascript 的文本区域创建一个退格按钮

excel - 分配快捷键并隐藏宏