Utilisation de D3 pour parsingr mon CSV

Je tente d'utiliser D3 pour parsingr un file CSV excel dans une table. Je sais que le code "fonctionne" parce que cela a fonctionné sur le browser de mon professeur (c'est aussi le code en ligne, donc cela a fonctionné pour d'autres); mais lorsque j'essaie d'exécuter le même code, aucun tableau ne s'affiche dans mon browser. J'ai essayé sur Chrome et Edge. Mon professeur l'a couru sur Chrome et cela a fonctionné pour lui (il avait Mac, j'ai Windows 10). Quoi qu'il en soit, je cherche de l'aide pour savoir pourquoi cela pourrait ne pas fonctionner. Compte tenu de ce qui ne fonctionne pas, est-ce que de toute façon, quelqu'un peut m'aider à parsingr datatables de la feuille Excel autrement que cela?

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

Fichier 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

J'ai également essayé de download les files .js localement, en changeant le code pour l'installation locale des files javascript, et cela ne fonctionnait toujours pas. Donc, aucune des deux options n'a fonctionné pour moi. Le site est: d3js

Edit: Donc, j'ai maintenant ouvert index.html dans mon browser Web avec le code mis à jour comme indiqué ci-dessous. Rien n'est apparu comme d'habitude, alors je Right-Clicked: Inspect et l'onglet apparaît. En haut à droite, j'ai remarqué le x avec un 2, donc il me semble évident que j'ai 2 erreurs. Je clique dessus et j'ai obtenu ce qui suit:

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

Tous les deux dans d3.v4.min.js:6

Je ne peux pas être certain quant à l'identique du code essayé dans d'autres browsers; Cependant, je crois que vous avez fait un changement, en utilisant d3.js v4

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

qui a un espace de noms légèrement différent de ce qui suit:

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

En utilisant d3v4, vous devez utiliser:

 d3.csvParseRows

Plutôt que:

 d3.csv.parseRows

À partir de https://github.com/d3/d3/blob/master/CHANGES.md :

chaque symbole dans D3 4.0 partage maintenant un espace de noms plat plutôt que celui de D3 3.x. Par exemple, d3.scale.linear est maintenant d3.scaleLinear, et d3.layout.treemap est maintenant d3.treemap.

Je suppose que votre file csv n'inclut pas le text "data.csv" sur la première ligne car ce serait alors un file csv mal formé.