Question

我正在尝试使用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; })]);
            ...

我做错了什么？

Answer 1

这背后的原因是因为你所处理的数字实际上不是数字 - 它们是字符串。在这种情况下，它将使用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执行相同操作但不使用promises，而是通常会对d3.csv()，d3.json()，d3.tsv()函数进行额外回调

Max没有拉回正确的数字

1 个答案: