web-dev-qa-db-fra.com

Chargement de données D3.js à partir d'une simple chaîne JSON

La plupart des exemples de la galerie chargent des données à partir de fichiers TSV. 

Comment puis-je convertir ce qui suit pour utiliser une variable json locale au lieu de données TSV? 

d3.tsv("data.tsv", function(error, data) {

    var myEntitiesJson = getEntitiesJson(); // <------ use this instead of "data"
    data.forEach(function(d) {
        d.frequency = +d.frequency;
    });

    x.domain(data.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

    ...

    svg.selectAll(".bar")
        .data(data)     // <----- bind to myEntities instead
}

Autant que je sache, je dois simplement faire quelque chose à mes entités, afin de data-fy afin que le graphique puisse s'y rattacher. 

METTRE &AGRAVE; JOUR

Je fais des progrès. J'ai connecté mes entités à partir de JSON et le graphique commence à prendre une nouvelle forme. 

Actuellement, le code suivant se casse:

svg.selectAll(".bar")
    .data(myEntities)  // <-- this is an array of objects
    .enter().append("rect")

Cela cause: 

Erreur: valeur non valide pour l'attribut y = "NaN" 

Erreur: valeur non valide pour l'attribut height = "NaN"

d3.js
34
Sonic Soul

pour data.json distant remplacer:

d3.tsv("data.tsv", function(error, data) {...}

avec :

d3.json("data.json", function(error, data) {
    console.log(data); // this is your data
});

pour les données locales:

var myData = { {date:'2013-05-01', frequency:99},
               {date:'2013-05-02', frequency:24} };

function draw(data) {
    console.log(data); // this is your data
}

draw(myData);
19
Alban

Il n’existe pas de moyen simple d’exploiter des données dans un JSON donné, car tous les objets JSON ne se ressemblent pas shape.

Par forme, j'entends la manière dont les données sont organisées. Par exemple, '{"foo" : 1, "bar" : 2}' et '{"names" : ["foo", "bar"], "values" : [1, 2]}' peuvent être utilisés pour stocker les mêmes données, mais on stocke tout dans un objet dans lequel les clés d'objet correspondent aux noms des points de données, et on utilise des tableaux distincts pour stocker les noms et les valeurs, avec les entrées correspondantes. ayant un index de tableau commun.

Il existe cependant un process général que vous pouvez utiliser pour transformer json en données. Tout d'abord, vous aurez besoin d'analyser votre JSON. Cela peut être fait avec l'objet javascript-standard JSON. USe JSON.parse(myJson) pour obtenir des données de votre objet json s'il est déjà chargé sur le client. d3.json(my/json/directory, fn(){}) peut charger et analyser votre JSON. Si vous le chargez d'ailleurs sur votre serveur, cela pourrait être un meilleur moyen de placer le JSON dans un objet.

Une fois que votre json est emballé dans un objet javascript, vous devez tout de même y transférer des données, la partie qui dépend de vos données. Ce que d3 espère obtenir est une forme de tableau: [dataPoint1, dataPoint2, ...]. Pour les deux exemples que j'ai donnés ci-dessus, le tableau que vous voudriez ressembler à ceci: 

[{'name' : 'foo', 'value' : 1}, {'name' : 'bar', 'value' : 2}]

J'ai un élément dans mon tableau pour chaque point de données, avec deux attributs: value et name. (Dans votre exemple, vous voudriez les attributs letter et frequency)

Pour chacun de mes exemples, j'utiliserais une fonction différente pour créer le tableau. Avec cette ligne en commun:

var rawData = JSON.parse(myJson);

Mon premier json pourrait être emballé avec cette fonction:

var key;
var data = [];

for(key in rawData){
    if(rawData.hasOwnProperty(key)){
        data.Push({'name' : key, 'value' : rawData[key]});
    }
}

Pour le deuxième exemple, je voudrais parcourir chaque attribut de mon objet, names et values. Mon code pourrait ressembler à ceci:

var i;
var data = [];

for(i = 0; i < rawData.names.length; i++){
    data.Push({'name' : rawData.names[i], 'value' : rawData.values[i]});
}

Ces deux éléments donneront une version de mon code JSON d'origine, basée sur les données, que je pourrai ensuite utiliser dans d3.

8
ckersch

Pour D3jsv2 ou v3 (vous ne savez pas lequel).

Déclarez votre jeu de données

var dataset = { 
    "first-name": "Stack",
    "last-name": "Overflow",
}; // JSON object
var dataset = [ 5, 10, 15, 20, 25 ]; // or array

Comme indiqué par la doc , vous pouvez utiliser soit:

un tableau de nombres ou d'objets, ou une fonction qui retourne un tableau de valeurs

Le lier

d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text("New paragraph!");

Plus d'explications sur le tutoriel de Scott Murray sur le D3 # # Binding data }.

La fonction data () s'applique à une sélection. Vous trouverez plus d'informations dans la documentation officielle: selection.data ([values ​​[ key]]) }.

5
Édouard Lopez

Vous pouvez modifier le json en un fichier javascript qui assigne les données à une valeur globale. Prenant https://bl.ocks.org/d3noob/5028304 comme exemple:

De:

<script>
.....
// load the data
d3.json("sankeygreenhouse.json", function(error, graph) {

    var nodeMap = {};
    graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });

À:

<script src="graphData.js"></script>
<script>
.....
    var nodeMap = {};
    graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });

Notez que nous avons supprimé la nécessité du rappel.

Le fichier json était "sankeygreenhouse.json":

{
"links": [
  {"source":"Agricultural Energy Use","target":"Carbon Dioxide","value":"1.4"},

Maintenant, dans "graphData.js":

var graph = {
   "links": [
      {"source":"Agricultural Energy Use","target":"Carbon Dioxide","value":"1.4"},
1
netrc

Il suffit de changer les données en un tableau d'objets comme celui-ci: 

let data = [{"apples":53245,"oranges":200},{"apples":28479,"oranges":200},{"apples":19697,"oranges":200},{"apples":24037,"oranges":200},{"apples":40245,"oranges":200}]

et commentez la d3.tsv("data.tsv", function(error, data) {...

0
Squirrl