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