Макс не возвращает правильный номер - PullRequest
0 голосов
/ 01 мая 2018

Я пытаюсь использовать переменную JSON для заполнения гистограммы, но когда я пытаюсь установить максимальное значение домена y, код возвращает неправильное значение.

var sample_data = {"category":
{"categoryname":"Beverages","num_products":"12"}, 
{"categoryname":"Condiments","num_products":"12"}, 
{"categoryname":"Confections","num_products":"13"},
{"categoryname":"Dairy Products","num_products":"10"}, 
{"categoryname":"Grains/Cereals","num_products":"7"}, 
{"categoryname":"Meat/Poultry","num_products":"6"}, 
{"categoryname":"Produce","num_products":"5"}, 
{"categoryname":"Seafood","num_products":"12"}]};

Код всегда возвращает 7, а не 13.

function loadJSONChart(data) {      
            ...                 
            x.domain(data.category.map(function(d) { return d.categoryname; }));
            y.domain([0, d3.max(data.category, function(d) { return d.num_products; })]);
            ...

Что я делаю не так?

1 Ответ

0 голосов
/ 01 мая 2018

Причина этого в том, что числа, с которыми вы имеете дело, на самом деле не числа, а строки. В этом случае он будет использовать max на основе сравнения строк (который, я думаю, будет основан на порядках сортировки).

То, что вы хотите сделать, - это предварительно записать ваши данные в число. Если вы используете статические данные, просто сделайте следующее:

data = data.map(d => ({ ...d, num_products: +d.num_products });

Я бы рекомендовал делать это на ранних стадиях с исходными данными, так как в противном случае вы можете повторить эту операцию несколько раз, что расточительно.

Если вы запрашиваете данные, вы также можете отформатировать их при входе. Типичный пример ( D3 V5 ) будет выглядеть так:

d3.json("...pathToJson")
  .then(data => data.map(d => ({ ...d, num_products: +d.num_products }))
  .then((data) => {
     // Call you render function
  });

Обратите внимание, что вы можете сделать то же самое с предыдущими версиями D3, но они не используют обещания, вместо этого они обычно принимают дополнительный обратный вызов в функцию d3.csv(), d3.json(), d3.tsv().

...