Как использовать d3.min и d3.max в команде d3.json

Я новичок в d3 и Javascript. Я играл с примером choropleth, но теперь хотел бы внести некоторые более подробные изменения. Один из них - найти max и min JSON, которые я использую в качестве входных данных.

Мой вопрос прост, поскольку фрагмент кода ниже объекта корректно выводится на консоль для команды console.log(data), однако весь объект также выводится для операторов min и max, а не только для мин и макс.

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

Вот фрагмент объекта JSON:

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

Все, что мне хотелось бы получить, это понять, почему d3.min([data]) и d3.max([data]) вызывают вывод всего объекта на консоль вместо минимального и максимального числа в объект данных.

Спасибо заранее.

Ответы

Ответ 1

Функции d3.min() и d3.max() работают на массивах, а не на объектах. Кажется, вы пытаетесь решить эту проблему, обернув объект data в массив (например, d3.max([data])), но все это действительно говорит: "Дайте мне максимальное значение массива с одним значением (объект данных)." Поскольку в массиве есть только одно значение, это значение возвращается.

Если вам просто нужно значение max/min в объекте, вы можете использовать функцию d3.values() для извлечения всех значений в данных в виде массива, а затем взять максимальное значение в этом массиве:

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

Если вы хотите узнать и ключ, вам может понадобиться использовать d3.entries() для создания массива объектов { key, value }, затем отсортировать их и взять верх:

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

Если ваши данные представляют собой массив, ваш исходный код будет работать, если вы избавитесь от скобок вокруг данных:

  var data = [32710,20280,18002];

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

Если вам нужно идентифицировать значения массива с помощью клавиш "01", "02", "03", создайте массив объектов и оперируйте значениями, чтобы получить 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

Я новичок в d3 и JavaScript, но я нашел обходное решение, чтобы найти min и max трех строк с объектами, используя d3.extent и .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;     })
                   ))
  ));