使用D3解析我的CSV

我正在嘗試使用D3來將CSV excel文件解析爲表格。我知道代碼「有效」，因爲這在我老師的瀏覽器上工作過（它也是在線代碼，所以它適用於其他人）;但是當我嘗試運行相同的代碼時，瀏覽器中不會彈出任何表格。我嘗試過使用Chrome和Edge。我的老師在Chrome上運行它，併爲他工作（他有Mac，我有Windows 10）。無論如何，尋找一些援助，爲什麼這可能無法正常工作。考慮到這是行不通的，反正有人可以幫我解析excel表格的數據而不是這個？使用D3解析我的CSV

<!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到我的網頁瀏覽器，更新後的代碼如下評論。沒有任何東西像往常一樣彈出，所以我Right-Clicked: Inspect和標籤彈出。在右上角，我注意到有一個2的x，所以顯然看起來像我有2個錯誤。我點擊它，我有以下幾點：

XMLHttpRequest cannot load: file:///C:/Users/John/Desktop/table/data.csv Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Uncaught TypeError: Cannot read property 'length' of null

無論在d3.v4.min.js:6

來源

2016-11-08 Speakmore

在chrome中加載本地文件是一個不同的問題。此問題在此處記錄：http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local –

我不能肯定爲在其他瀏覽器中嘗試的代碼相同的煩躁;但是，我相信，你已經做出一個改變，使用d3.js V4

  <script src="https://d3js.org/d3.v4.min.js"></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文件。

來源

2016-11-08 04:39:00

我試過原始（I相信它是'.v3'），那沒有奏效，所以我去了網站，看到了一個更新的版本，並將它換成了'.v4' ---反正，讓我保持一樣.v4並嘗試新的代碼看看是否有效。感謝您的頭像 – Speakmore

當我複製你的代碼和csv並加載它時，我得到了錯誤：「d3.csv.parseRows不是一個函數」，它支持應該使用d3.csvParseRows的結論。在更改它時，您的編碼無誤地執行。如果這不是原因，我很難過。 –

我改變了一行，並沒有解決任何問題。我發現了一些可以幫助別人幫助我的東西，現在要編輯主題。不知道它是否有幫助，但希望！ – Speakmore

使用D3解析我的CSV

回答

相關問題