2016-11-08 2 views
1

Ich versuche, mit D3 eine CSV-Excel-Datei in einer Tabelle zu analysieren. Ich weiß, dass der Code "funktioniert", weil das im Browser meines Lehrers funktioniert (auch Code ist online, also funktionierte es für andere); aber wenn ich versuche, denselben Code auszuführen, erscheint in meinem Browser keine Tabelle. Ich habe Chrome und Edge ausprobiert. Mein Lehrer hat es auf Chrome ausgeführt und es hat für ihn funktioniert (er hatte Mac, ich habe Windows 10). Wie auch immer, auf der Suche nach Hilfe, warum dies nicht funktioniert. In Anbetracht dessen, dass es nicht funktioniert, gibt es jemanden, der mir helfen kann, die Daten des Excel-Blattes zu analysieren?Verwenden von D3 zum Analysieren meiner CSV-Datei

<!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-Datei:

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 

Ich habe auch gerade versucht, vor Ort die Js das Herunterladen von Dateien, den Code für die lokale Installation der JavaScript-Dateien zu ändern, und es immer noch nicht funktioniert. Also hat keine der beiden Möglichkeiten für mich funktioniert. Die Seite ist: d3js

Edit: So habe ich jetzt geöffnet index.html in meinem Webbrowser mit dem aktualisierten Code wie unten kommentiert. Nichts tauchte wie gewöhnlich auf, also ich Right-Clicked: Inspect und die Registerkarte erscheint. Oben rechts habe ich die x mit einer 2 bemerkt, offensichtlich scheint es so, als hätte ich 2 Fehler. Ich kann es klicken und ich habe folgendes:

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

Sowohl in d3.v4.min.js:6

+0

Das Laden lokaler Dateien in Chrome ist ein anderes Problem. Dieses Problem ist hier dokumentiert: http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local –

Antwort

1

Ich kann nicht in Bezug auf die identischen Heit des Codes versucht, in anderen Browsern sicher sein; jedoch glaube ich, dass Sie eine Änderung vorgenommen haben, d3.js v4

  <script src="https://d3js.org/d3.v4.min.js"></script> 

, die hat einen etwas anderen Namespace als:

  <script src="d3.min.js?v=3.2.8"></script> 

Bei der Verwendung von d3v4 sollten Sie verwenden:

d3.csvParseRows 

Statt:

d3.csv.parseRows 

Von 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.

  • Ich gehe davon aus CSV-Datei den „data.csv“ Text auf der ersten Zeile nicht enthält, wie die dann eine fehlerhafte CSV-Datei sein würden.
+0

Ich versuchte das Original (I glaube, es war '.v3') und das hat nicht funktioniert, also ging ich auf die Seite, sah eine aktualisierte Version und vertauschte es zu' .v4' --- Anyways, lassen Sie mich das gleiche .v4 und versuchen Sie das neue Code, um zu sehen, ob das funktioniert. Danke für den heads-up – Speakmore

+0

Als ich Ihren Code und csv kopiert und geladen habe, habe ich den Fehler: "d3.csv.parseRows ist keine Funktion", die die Schlussfolgerung unterstützt, dass d3.csvParseRows verwendet werden sollte. Nach der Änderung wurde Ihr Code ohne Fehler ausgeführt. Ich bin ratlos, wenn das nicht der Grund ist. –

+0

Ich änderte die eine Zeile und reparierte nichts.Ich habe etwas gefunden, das mir helfen kann, aber ich werde das Hauptthema jetzt bearbeiten. Bin mir nicht sicher, ob es wirklich hilft oder nicht, aber hoffentlich! – Speakmore

Verwandte Themen