web-dev-qa-db-fra.com

Comment utiliser d3.min et d3.max dans une commande d3.json

Je suis nouveau sur d3 et Javascript. J'ai joué avec l'exemple de choroplèth, mais j'aimerais maintenant apporter des modifications plus détaillées. L'un d'eux consiste à trouver le max et le min du JSON que j'utilise en entrée.

Ma question est simple, car l'extrait de code ci-dessous l'objet est sorti correctement sur la console pour la commande console.log (data), mais l'objet entier est également sorti pour les instructions min et max au lieu de seulement le min et le max.

d3.json("data/unemployment_by_state.json", function(data) {   
  console.log(data);
  console.log(d3.min([data]));
  console.log(d3.max([data]));
});

Voici un extrait de l'objet JSON:

{"01":32710,"02":20280,"03":18002}

Tout ce que j'aimerais, c'est comprendre pourquoi le d3.min ([data]) et le d3.max ([data]) provoquent la sortie de l'objet entier vers la console au lieu du nombre min et max dans l'objet data .

Merci d'avance.

d3.js
29
mozdyv

Les fonctions d3.min() et d3.max() fonctionnent sur les tableaux, pas sur les objets. Vous semblez essayer de résoudre ce problème en enveloppant l'objet data dans un tableau (par exemple d3.max([data])), mais tout ce que vous faites, c'est de dire "Donnez-moi la valeur maximale d'un tableau avec un (l'objet de données). " Comme il n'y a qu'une seule valeur dans le tableau, cette valeur est renvoyée.

Si vous voulez juste la valeur max/min dans l'objet, vous pouvez utiliser la fonction d3.values() pour extraire toutes les valeurs des données sous forme de tableau, puis prendre la valeur max dans ce tableau:

var max = d3.max(d3.values(data)); 
// 32710

Si vous souhaitez également connaître la clé, vous devrez peut-être utiliser d3.entries() pour créer un tableau d'objets { key, value }, Puis les trier et prendre le haut:

// create an array of key, value objects
var max = d3.entries(data)
    // sort by value descending
    .sort(function(a, b) { return d3.descending(a.value, b.value); })
    // take the first option
    [0];
// { key: "01", value: 32710 }
46
nrabinowitz

Si vos données sont un tableau, votre code d'origine fonctionnera, si vous vous débarrassez des crochets autour des données:

  var data = [32710,20280,18002];

  console.log(data);
  console.log(d3.min(data));
  console.log(d3.max(data));

Si vous devez identifier les valeurs du tableau avec les clés "01", "02", "03", créez un tableau d'objets et opérez sur les valeurs pour obtenir min/max:

   //data as key/value pairs
   var data = [
     {key: "01",  value:  32710},
     {key: "02",  value:  20280},
     {key: "03",  value: 18002}
  ];

  console.log(data);
  console.log(d3.min(data, function(d) { return d.value; }));
  console.log(d3.max(data, function(d) { return d.value; }));

  // AND IF YOU WANT THE min/max of the KEYS:
  console.log(d3.min(data, function(d) { return d.key; }));
  console.log(d3.max(data, function(d) { return d.key; }));
49
mike

Je suis également novice en d3 et en JavaScript, mais j'ai trouvé une solution pour trouver le minimum et le maximum de trois lignes avec des objets, en utilisant d3.extent et .concat:

y.domain(
  d3.extent(
    d3.extent(data, function(d) {
      return d.line1;     })
    .concat(d3.extent(data, function(d) {
      return d.line2;     })
            .concat(d3.extent(data, function(d) {
      return d.line3;     })
                   ))
  ));
0
API