javascript - d3.js 线图轴不会达到最高数字

Question

这是我正在阅读的 csv 文件，prices13.csv

date,price
1,32
2,62
6,50
10,145

我正在使用“http://d3js.org/d3.v3.min.js” 这是图表的代码

 <script type="text/javascript">    

d3.csv("prices13.csv")
    .row(function(d) { return { date:(d.date),price:(d.price)};})
    .get(function(error,data){

    var height = 400;
    var width = 600;

    var maxDate = d3.max(data,function(d){ return d.date; });
    var minDate = d3.min(data,function(d){ return d.date; });
    var maxPrice = d3.max(data,function(d){ return d.price; });
    console.log(maxDate);   

    var y = d3.scale.linear()
            .domain([0,maxPrice])
            .range([height,0]);

    var x = d3.scale.linear()
                .domain([minDate, maxDate])
                .range([0,width]);

    var yAxis = d3.svg.axis().scale(y).orient("left");
    var xAxis = d3.svg.axis().scale(x).orient("bottom");

    var svg = d3.select('body').append('svg')
                .attr('height', '100%')
                .attr('width', '100%');

    var chartGroup = svg.append('g')
                    .attr('transform', 'translate(50,50)');

    var line = d3.svg.line()
                .x(function(d){return x(d.date);})
                .y(function(d){return y(d.price);});


    chartGroup.append('path').attr('d', line(data));
    chartGroup.append('g').attr('class', 'x axis').attr('transform','translate(0,'+height+')').call(xAxis);
    chartGroup.append('g').attr('class', 'y axis').call(yAxis);
    });

这会创建一个折线图，但是 x 轴最多只能达到 6.0，而 y 轴最多只能达到 60。

无论如何，它是否可以达到 .csv 中的最高数字。这就是我在使用 d3.max(data,function(d).

这是图形输出的链接 http://www.mydatavisualisation.co.uk/linegraph.html

Answer 1

您将 d.date 评估为字符串，因此:

6 > 10 

或

1 < 10 < 2 < 6

只需添加 (+) 表示数字:

    var maxDate = d3.max(data,function(d){ return +d.date; }); // HERE
    var minDate = d3.min(data,function(d){ return +d.date; }); // HERE
    var maxPrice = d3.max(data,function(d){ return +d.price; });  // HERE
    console.log(maxDate);