How to use d3.min and d3.max within a d3.json comm

问题:

I'm new to d3 and Javascript. I have played around with the choropleth example but would like to now make some more detailed changes. One of which is to find the max and min of the JSON that I am using as input.

My question is simple, for the code snippet below the object is output correctly to the console for the console.log(data) command, however the entire object is also output for the min and max statements as well instead of just the min and the max.

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

Here is a snippet of the JSON object:

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

All I would like some help with is understanding why the d3.min([data]) and d3.max([data]) are causing the entire object to be output to the console instead of the min and max number in the data object.

Thanks in advance.

回答1:

The d3.min() and d3.max() functions operate on arrays, not on objects. You seem to be trying to address this by wrapping the data object in an array (e.g. d3.max([data])) but all this is really doing is saying "Give me the max value of an array with one value (the data object)." As there's only one value in the array, that value is returned.

If you just want the max/min value in the object, you can use the d3.values() function to extract all the values in the data as an array, then take the max value in that array:

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

If you want to know the key as well, you might need to use d3.entries() to create an array of { key, value } objects, then sort them and take the top:

// 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 }

回答2:

If your data is an array, your original code will work, if you get rid of the brackets around data:

  var data = [32710,20280,18002];

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

If you need to identify the array values with the keys "01","02", "03", create an array of objects, and operate on the values to get 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; }));

回答3:

I'm new to d3 and JavaScript as well but I found a workaround to find the min and max of three lines with objects, using d3.extent and .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;     })
                   ))
  ));