d3.max不会从csv文件返回最高值 [英] d3.max doesn't return highest value from csv file

问题描述

我有一个小的csv文件，包含这些数据：

I have a small csv file, containing this data:

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代码：

And also JS code to draw a graph out of this data:

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文件中Amount列的最高值是706.80，但是

Highest value for "Amount" column in my csv file is 706.80, yet

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

函数返回72.67。

function returns 72.67.

我检查过数据是否可能已损坏或格式错误，但看不出有什么问题。这可能有什么问题？

I've checked if data is perhaps corrupted or malformed, but can't see anything wrong with it. What can be a problem here?

推荐答案

事实证明，来自csv文件的数据量是一个字符串数组，而不是数字，javascript对待它因此，例如：

It turned out that, amount data coming from csv file is an array of strings, rather than numbers, and javascript treats it as this, so for example:

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

提示我在d3.max文档中找到了此处。

Hint to that I found here on d3.max documentation.

因此解决方案是 parseFloat（d.Amount）在用d3最大化它之前，这里：

So solution to that will be to parseFloat(d.Amount) before "maxing" it with d3, as here:

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

});

这篇关于d3.max不会从csv文件返回最高值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！