Question

这是我正在阅读的csv文件，price13.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（数据，函数（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);

d3.js折线图轴线不会达到最高编号

1 个答案: