如何使用数组中的日期绘制X轴

时间:2014-05-20 01:20:42

标签: javascript arrays d3.js

对基础代码中的任何新手错误采取先发制人的道歉。我正在尝试使用d3.js生成一个简单的折线图,其中x轴上的日期和y轴上的整数值 。数据由两个数组提供:xDataGetyData来自我可以收集的问题是xDataGet中的字符串未正确转换为Dates。在修改代码时,我可以设法显示Y轴,但是X轴没有运气。有人可以说明我哪里出错吗?

    var margin = [80, 80, 80, 80]; // margins
    var width = 1000 - margin[1] - margin[3]; // width
    var height = 400 - margin[0] - margin[2]; // height

    var xDataGet = [ '03/18/2014', '03/01/2014', '02/15/2014', '02/01/2014', '01/18/2014', '12/07/2013', '11/16/2013' ]


    function getDate(d) {
        formatted = d3.time.format("%m-%d-%Y")
        return formatted(new Date(d));
    }

    var xData = getDate(xDataGet)
    var yData = [ 33, 36, 42, 27, 36, 21, 18 ]

    var x = d3.time.scale()
        .range([0, width])
        .domain([d3.min(xData), d3.max(xData)])
    var y = d3.scale.linear()
        .range([height, 0])
        .domain([0, d3.max(yData)]);


    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")

    var line = d3.svg.line()
        .x(function(d) { return x(xData); })
        .y(function(d) { return y(yData); })
        .interpolate("linear");

    var svg = d3.select("body").append("svg")
        .attr("width", width + 80 + 80)
        .attr("height", height + 80 + 80)
      .append("g")
        .attr("transform", "translate(" + 80 + "," + 80 + ")");

    svg.append("svg:g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("svg:g")
        .attr("class", "y axis")
        .attr("transform", "translate(-25,0)")
        .call(yAxis);

    svg.append("svg:path").attr("d", line);

0 个答案:

没有答案