d3 csv de chargement de données
Je suis en train d'adapter un simple nuage de points du programme en D3 à accepter un fichier CSV. Quand j'ai utiliser les données dans le fichier, il fonctionne très bien, mais lorsque j'essaie de charger le fichier CSV, il ne fonctionnerait tout simplement pas. Est-il quelque chose de simple, je suis absent? Le contenu du fichier CSV "datatest.csv" sont les mêmes que le jeu de données dans le code. J'ai vérifié que le navigateur est le chargement des données, et il semble tous être là. Je me dis que je suis tout simplement en manque une étape.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Demo: Linear scales</title>
<script type="text/javascript" src="../d3/d3.v3.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 900;
var h = 500;
var padding = 20;
var dataset = [];
// var dataset = [
// [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
// [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
// [600, 150]
// ];
d3.csv("datatest.csv", function(data) {
dataset=data
});
//Create scale functions
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([2, 5]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", function(d) {
return rScale(d[1]);
});
</script>
</body>
</html>C'est le contenu du fichier CSV:
x-coordinate, y-coordinate
5,20
480,90
250,50
100,33
330,95
410,12
475,44
25,67
85,21
220,88
600,150Vous devez vous connecter pour publier un commentaire.
IMPORTANT:
Alors que la réponse ici, il y a un builtin méthode
d3.csv.parseRows(), qui donne le même résultat. Pour cela, voir @ryanmt réponse (également sur cette page). Cependant, gardez à l'esprit que quelle que soit la méthode que vous utilisez, si votre fichier CSV des nombres, alors vous aurez besoin de les convertir à partir de chaînes de javascript Numéros. Vous pouvez le faire en préfixant les valeurs analysées avec un+. Par exemple, dans la solution que j'ai fourni ici — qui n'utilise pas deparseRows()— que la conversion est réalisée à l'aide+d["x-coordinate"].LA RÉPONSE:
Le CSV analyseur produit un tableau d'objets, plutôt que le tableau de tableaux que vous avez besoin. Il ressemble à ceci:
Pour le transformer, vous devez utiliser un
map()fonction:(Remarque,
map()n'est pas disponible dans les vieux IE. Si ce qui compte, alors il ya beaucoup de solutions à d3, jQuery, etc)console.log'ing les données et voir ce que vous obtenez.d[" y-coordinate"], mais c'est assez bizarre). Ensuite, vous avez besoin de convertir les valeurs de chaînes (comme ils le sont dans le CSV) pour les numéros. Le moyen rapide de le faire est d'ajouter+devant chacun d'eux (j'ai modifié le code pour afficher cette).+dstand for?NaNou conserve la chaîne (probablement à l'ancienne), de sorte à être prudent avec elle.D3 fournit une interface pour cette chose.
Au lieu de l'appeler
.parse()sur vos données, appel.parseRows. Cela fournit juste les données dans un Tableau, plutôt que d'un Objet (en fonction de la ligne d'en-tête).voir le La Documentation.
.parseRows? Merci!À l'aide de d3.csvParseRows (en supposant que D3 v5)