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。

所以解决这个问题的方法是在使用 d3“最大化”之前parseFloat(d.Amount)，如下所示：

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; }
        });

});