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
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 –