将 CSV 添加到 ASP.NET Web 应用程序答案

【问题标题】：Adding CSV to ASP.NET Web Application将 CSV 添加到 ASP.NET Web 应用程序
【发布时间】：2014-11-01 21:19:05
【问题描述】：

我正在尝试使用 Visual Studio 2013 和 csv 文件创建一个基本的 d3.js 图表。这是我第一次使用 Visual Studio 并且无法理解 数据绑定 没有发生的原因。运行以下代码后，我没有得到任何结果。我相信这是因为 csv 或 json 文件应该在同一个文件夹中。但即使在那之后我也没有得到想要的结果。

HTML 代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> D3 Tutorial</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF8">


 </head>
<body>
<script>

    d3.csv("mydata.csv", function(data) { 

        var canvas = d3.select("body")
                        .append("svg")
                        .attr("width", 500)
                        .attr("height",500)

        canvas.selectAll("rect")
                .data(data)
                .enter()
                    .append("rect")
                    .attr("width", function(d) { return d.age * 50;})
                    .attr("height" , 50)
                    .attr("y", function (d , i) { return i * 50 })
                    .attr("fill", "blue")
</script>

</body>
</html>

请在我的解决方案资源管理器的屏幕截图下方找到

还有mydata.csv

“姓名”、“年龄”

“玛丽亚”，30

“弗雷德”,50

“弗朗西斯”，12

错误

XMLHttpRequest 无法加载 file:///C:/xampp/htdocs/mydata.csv。跨源请求仅支持协议方案：http、data、chrome-extension、https、chrome-extension-resource。

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

未捕获的 NetworkError：无法在“XMLHttpRequest”上执行“发送”：无法加载“file:///C:/xampp/htdocs/mydata.csv”。

【问题讨论】：

打开 JavaScript 调试器，看看是否收到 404 错误。
@jwize javascript调试器没有问题，因为所有关联的js文件都成功加载了。
@jwize 正在谈论开发人员工具。 d3 尝试下拉 csv 文件时是否出现 404 错误。使用工具查看它试图从哪里访问它。您将很快能够确定问题所在。这是微不足道的调试技巧……
@TheMuffinMan 感谢您的提示，我正在关注错误。 XMLHttpRequest 无法加载 file:///C:/xampp/htdocs/mydata.csv。跨源请求仅支持协议方案：http、data、chrome-extension、https、chrome-extension-resource。未捕获的类型错误：无法读取 null 的属性“长度”未捕获的网络错误：无法在“XMLHttpRequest”上执行“发送”：无法加载“文件：///C:/xampp/htdocs/mydata.csv”。
终于成功了。你们中的任何人都可以写一个答案，以便我可以结束这个问题。再次感谢您的宝贵时间。

标签： javascript c# asp.net csv d3.js

【解决方案1】：

您正在尝试通过 JavaScript 加载本地文件 ("mydata.csv")，出于安全原因，大多数现代浏览器都限制了该文件。为了使您的脚本正常工作，您需要通过 Web 服务器加载您的页面。您可以将文件上传到远程服务器，也可以在本地计算机上托管一个用于开发。

【讨论】：