將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應用程序

回答

相關問題