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

我正在尝试使用Visual Studio 2013和csv文件创建基本的d3.js图表。这是我第一次玩Visual Studio，不能理解数据绑定不会发生的原因。运行下面的代码后，我没有得到任何结果。我相信它是因为csv或json文件应该位于同一个文件夹中。但即使在此之后，我也没有得到期望的结果。将CSV添加到ASP.NET Web应用程序

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>

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

Solution Explorer - Visual Studio 2013

而且mydata.csv

“姓名”，“年龄“

“玛利亚”，30

“佛瑞德”，50

“弗朗西斯”，12

错误

的XMLHttpRequest无法加载的文件：/// C：/ XAMPP/htdocs中/ mydata.csv。只有协议方案支持跨源请求：http，data，chrome-extension，https，chrome-extension-resource。

遗漏的类型错误：无法读取空的特性 '长度'

未捕获NetworkError：无法执行 '发送' 上 '的XMLHttpRequest'：无法加载“文件：/// C：/ XAMPP/htdocs中/ MYDATA .csv格式。

来源

2014-11-01 LonelySoul

打开JavaScript调试器，看看你是否得到404错误。 – jwize 2014-11-01 21:26:28

@jwize javascript调试器没有问题，因为所有关联的js文件都已成功加载。 – LonelySoul 2014-11-01 21:32:09

@jwize正在谈论开发者工具。当d3试图下拉csv文件时是否有404错误。使用这些工具查看它试图从哪里访问它。你很快就能确定出了什么问题。这是平凡的调试技巧... – 2014-11-01 22:17:23

您正试图通过JavaScript加载本地文件（"mydata.csv"），由于安全原因，这在大多数现代浏览器中都受到限制。为了您的脚本能够正常工作，您需要通过Web服务器加载您的页面。您可以将文件上传到远程服务器，也可以在本地机器上托管一个用于开发。

来源

2015-02-02 19:56:57

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

回答

相关问题