d3-lecture des données JSON au lieu du fichier CSV
j'essaie de lire les données dans ma visualisation de calendrier en utilisant JSON. À l'instant il fonctionne très bien à l'aide d'un fichier CSV:
d3.csv("RSAtest.csv", function(csv) {
var data = d3.nest()
.key(function(d) { return d.date; })
.rollup(function(d) { return d[0].total; })
.map(csv);
rect.filter(function(d) { return d in data; })
.attr("class", function(d) { return "day q" + color(data[d]) +
"-9"; })
.select("title")
.text(function(d) { return d + ": " + data[d]; });
});
Il lit la suite des données au format CSV:
date,total
2000-01-01,11
2000-01-02,13
.
.
.etc
N'importe quels pointeurs sur la façon dont je peux lire les données suivantes JSON à la place:
{"2000-01-01":19,"2000-01-02":11......etc}
j'ai essayé ce qui suit mais cela ne fonctionne pas pour moi (datareadCal.php crache le JSON pour moi):
d3.json("datareadCal.php", function(json) {
var data = d3.nest()
.key(function(d) { return d.Key; })
.rollup(function(d) { return d[0].Value; })
.map(json);
merci
2 réponses
Vous pouvez utiliser d3.entrées() faire tourner un objet littéral dans un tableau de paires clé/valeur:
var countsByDate = {'2000-01-01': 10, ...};
var dateCounts = d3.entries(countsByDate);
console.log(JSON.stringify(dateCounts[0])); // {"key": "2000-01-01", "value": 10}
Une chose que vous remarquerez, c'est que le tableau n'est pas correctement triés. Vous pouvez les Trier par clé Ascendant comme suit:
dateCounts = dateCounts.sort(function(a, b) {
return d3.ascending(a.key, b.key);
});
tournez votre .fichier json en un .js fichier qui est inclus dans votre fichier html. À l'intérieur de votre .fichier js avoir:
var countsByDate = {'2000-01-01':10,...};
Ensuite, vous pouvez référencer countsByDate....pas besoin de lire un fichier en soi.
Et vous pouvez le lire avec:
var data = d3.nest()
.key(function(d) { return d.Key; })
.entries(json);
Comme un de côté....d3.js dit qu'il est préférable de configurer votre json comme suit:
var countsByDate = [
{Date: '2000-01-01', Total: '10'},
{Date: '2000-01-02', Total: '11'},
];