d3.max не возвращает наибольшее значение из CSV-файла

Question

У меня есть небольшой файл CSV, содержащий эти данные:

Organisational Unit,Service Division Label,Category Internal Name,Purpose,Detailed Expenditure Code,Date,Amount,Capital Or Revenue,Benificiary Name 
Central & Corporate,Commercial Services Trading Services,Supplies and Services,Operational Materials,205,02/01/2015,35.20,R,A & A Electrical Distributors Ltd 
Central & Corporate,Commercial Services Trading Services,Supplies and Services,Operational Materials,205,12/01/2015,72.67,R,A & A Electrical Distributors Ltd 
Environment & Housing,Environmental Health,Capital,Construction,3,12/01/2015,72.00,C,A & P Crontractors Ltd 
Childrens Services,Safeguarding Targeted & Specialist,Third Party Payments,Section 17,551,02/01/2015,550.00,R,A Ahmadi 
Central & Corporate,Commercial Services Trading Services,Supplies and Services,Operational Materials,205,21/01/2015,26.35,R,A Andrews & Sons (Marbles & Tiles) 
Central & Corporate,Commercial Services Trading Services,Supplies and Services,Operational Materials,205,21/01/2015,33.32,R,A Andrews & Sons (Marbles & Tiles) 
Central & Corporate,Commercial Services Trading Services,Supplies and Services,Operational Materials,205,21/01/2015,51.84,R,A Andrews & Sons (Marbles & Tiles) 
Central & Corporate,Commercial Services Trading Services,Supplies and Services,Stores - Central And Other Depots,5,21/01/2015,706.80,R,A Andrews & Sons (Marbles & Tiles) 
City Development,Employment & Skills,Supplies and Services,Other Hired And Contracted Services,265,30/01/2015,248.19,R,REDACTED PERSONAL DATA 
City Development,Employment & Skills,Supplies and Services,Other Hired And Contracted Services,265,09/01/2015,248.19,R,REDACTED PERSONAL DATA 

А также JS код, чтобы нарисовать график из этих данных:

svg = d3.select("body").append("svg").attr({ 
    width: window.innerWidth - 40, 
    height: window.innerHeight 
}); 

var padding = 10, 
    radius = 4; 

var parse = d3.time.format("%d/%m/%Y").parse; 

d3.csv("./spending-small.csv", function(d) { d.Date = parse(d.Date); return d; }, function(data) { 

    var max = d3.max(data, function(d) { return d.Amount; }); 
    console.log(max); 

    var dateScale = d3.time.scale() 
     .domain(d3.extent(data, function(d) { return d.Date; })) 
     .range([50, window.innerWidth - 50]); 

    var amountScale = d3.scale.linear() 
     .domain([0, d3.max(data, function(d) { return d.Amount; })]) 
     .range([50, window.innerHeight - 50]); 

    // Define date Axis 
    var dateAxis = d3.svg.axis().scale(dateScale) 
     //.tickSize(100 - window.innerHeight) 
     .tickSize(1) 
     .orient("bottom"); 

    // Draw date Axis 
    svg.append("g") 
     .attr({ 
      "class": "date-axis", 
      "transform": "translate(" + [0, window.innerHeight -50] + ")" 
     }).call(dateAxis); 

    // Define amount Axis 
    var amountAxis = d3.svg.axis().scale(amountScale) 
     //.tickSize(100 - window.innerHeight) 
     .tickSize(1) 
     .orient("left"); 

    // Draw amount Axis 
    svg.append("g") 
     .attr({ 
      "class": "amount-axis", 
      "transform": "translate(" + 50 + ",0)" 
     }).call(amountAxis); 

    svg.selectAll("circle") 
     .data(data) 
     .enter() 
     .append("circle") 
     .attr({ 
      cx: function(d) { return dateScale(d.Date); }, 
      cy: function(d) { return window.innerHeight - amountScale(d.Amount); }, 
      r: 3, 
      fill: "#fff", 
      stroke: "#78B446", 
      "stroke-width": 2, 
      "title": function (d) { return d.Amount; }, 
      "data-date": function (d) { return d.Date; } 
     }); 

}); 

Наибольшее значение для столбца "Сумма" в моем файле CSV является 706,80, но

d3.max(data, function(d) { return d.Amount; }) 

функция возвращает 72.67.

Я проверил, возможно, данные повреждены или искажены, но не могут увидеть что-то не так. Что может быть проблемой здесь?

Answer 1

Оказалось, что данные о количестве поступающие из CSV-файла представляет собой массив строк, а не чисел, Javascript рассматривает его как это, так, например:

var arr = ["35.20", "72.67", "550.00", "248.19"]; 
console.log(d3.max(arr)); 

вернется «72.67», но

var arr = [35.20, 72.67, 550.00, 248.19]; 
console.log(d3.max(arr)); 

вернется 550,00

намек на что я нашел here on d3.max documentation.

Так решение, что будет parseFloat(d.Amount) раньше «максить» его с d3, так как здесь:

svg = d3.select("body").append("svg").attr({ 
    width: window.innerWidth - 40, 
    height: window.innerHeight 
}); 

var padding = 10, 
    radius = 4; 

var parse = d3.time.format("%d/%m/%Y").parse; 

d3.csv("./spending-small.csv", function(d) { d.Date = parse(d.Date); d.Amount = parseFloat(d.Amount); return d; }, function(data) { 

    // var arr = [35.20, 72.67, 550.00, 248.19]; 
    // console.log(d3.max(arr)); 

    // var max = d3.max(data, function(d) { return d.Amount; }); 
    // console.log(max); 

    var dateScale = d3.time.scale() 
     .domain(d3.extent(data, function(d) { return d.Date; })) 
     .range([50, window.innerWidth - 50]); 

    var amountScale = d3.scale.linear() 
     .domain([0, d3.max(data, function(d) { return d.Amount; })]) 
     .range([window.innerHeight - 50, 50]); 

    // Define date Axis 
    var dateAxis = d3.svg.axis().scale(dateScale) 
     //.tickSize(100 - window.innerHeight) 
     .tickSize(1) 
     .orient("bottom"); 

    // Draw date Axis 
    svg.append("g") 
     .attr({ 
      "class": "date-axis", 
      "transform": "translate(" + [0, window.innerHeight -50] + ")" 
     }).call(dateAxis); 

    // Define amount Axis 
    var amountAxis = d3.svg.axis().scale(amountScale) 
     //.tickSize(100 - window.innerHeight) 
     .tickSize(1) 
     .orient("left"); 

    // Draw amount Axis 
    svg.append("g") 
     .attr({ 
      "class": "amount-axis", 
      "transform": "translate(" + 50 + ",0)" 
     }).call(amountAxis); 

    svg.selectAll("circle") 
     .data(data) 
     .enter() 
     .append("circle") 
     .attr({ 
      cx: function(d) { return dateScale(d.Date); }, 
      cy: function(d) { return amountScale(d.Amount); }, 
      r: 3, 
      fill: "#fff", 
      stroke: "#78B446", 
      "stroke-width": 2, 
      "title": function (d) { return d.Amount; }, 
      "data-date": function (d) { return d.Date; } 
     }); 

});