web-dev-qa-db-fra.com

Comment lire en CSV avec d3 v4?

J'ai juste un peu de mal à comprendre la documentation de CSV Parse avec D3. J'ai actuellement: 

d3.parse("data.csv",function(data){
    salesData = data; 
});

Mais je continue à avoir l'erreur: 

Uncaught TypeError: d3.parse n'est pas une fonction

A quoi est-ce censé ressembler? Je suis juste un peu confus, et les seuls exemples que j'ai pu trouver étaient quelque chose comme: ceci . 

J'ai aussi essayé quelque chose comme: 

d3.dsv.parse("data.csv",function(data){
    salesData = data; 
});

et j'ai: 

Uncaught TypeError: Impossible de lire la propriété 'parse' de undefined 

Pourquoi cela arrive-t-il? Toute aide serait grandement appréciée, merci !! 

javascriptcsvd3.js
7
ocean800

Il y a un certain malentendu ici: vous confondez d3.csv, qui est une requête, avec d3.csvParse, qui analyse une chaîne (et qui mélange également des fonctions D3 v3 avec des fonctions D3 v4). C'est la différence:

d3.csv (D3 v4)

Le d3.csv function, qui prend comme argument (url[[, row], callback]):

Renvoie une nouvelle demande pour le fichier CSV file au niveau de url spécifié avec le type mime par défaut text/csv. (c'est moi qui souligne)

Ainsi, comme vous pouvez le constater, vous utilisez d3.csv lorsque vous souhaitez demander un fichier CSV donné à une adresse URL donnée.

Par exemple, l'extrait ci-dessous obtient le fichier CSV à l'URL entre guillemets, ce qui ressemble à ceci ...

name, parent
Level 2: A, Top Level
Top Level, null
Son of A, Level 2: A
Daughter of A, Level 2: A
Level 2: B, Top Level

... et enregistre le fichier CSV analysé, vérifiez-le:

d3.csv("https://Gist.githubusercontent.com/d3noob/fa0f16e271cb191ae85f/raw/bf896176236341f56a55b36c8fc40e32c73051ad/treedata.csv", function(data){
    console.log(data);
});
<script src="https://d3js.org/d3.v4.min.js"></script>

d3.csvParse

D'autre part, d3.csvParse (ou d3.csv.parse dans D3 v3), qui prend comme argument (string[, row]):

Analyse la chaîne spécifiée, qui doit être au format de valeurs séparées par un délimiteur avec le délimiteur approprié, renvoyant un tableau d'objets représentant les lignes analysées.

Donc, vous utilisez d3.csvParse lorsque vous souhaitez analyser une chaîne.

Voici une démo, supposons que vous ayez cette chaîne: 

var data = "foo,bar,baz\n42,33,42\n12,76,54\n13,42,17";

Si vous voulez l'analyser, vous utiliserez d3.csvParse, pas d3.csv:

var data = "foo,bar,baz\n42,33,42\n12,76,54\n13,42,17";

var parsed = d3.csvParse(data);

console.log(parsed);
<script src="https://d3js.org/d3.v4.min.js"></script>

16
Gerardo Furtado

Vous pouvez obtenir des données CSV dans D3 comme suit: 

// get the data
d3.csv("data.csv", function(error, data) {
  if (error) throw error;
      console.log(data);
      //format data if required...
      //draw chart
}
2
sparta93

Utilisez d3.csv("data.csv", function(data){...}) pour obtenir le fichier CSV à partir de l'URL et de l'analyse, ou utilisez d3.csv.parse() pour analyser une chaîne au format CSV.

1
surfthecity

Voici le code que vous pouvez utiliser pour lire un fichier csv en utilisant d3.js

<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
 d3.csv("csv/cars.csv", function(data) {
 console.log(data[0]);
});
</script>

Notez que le nom du fichier csv est "cars.csv" et que le fichier est enregistré dans un dossier appelé csv. 

console.log(data[0])

vous aidera à voir la sortie des données dans la fenêtre de débogage du navigateur. Où, vous pouvez également trouver s'il y a une erreur aussi. 

0
Amir Md Amiruzzaman