what scale to use for representing years only on x axis in d3 js

Question

I have been developing an area chart for year(x axis) vs Revenue (y axis) in D3 Js.The data is as:

localData=[
        {"Revenue":"4.5","Year":"2011"},
        {"Revenue":"5.5","Year":"2010"},
        {"Revenue":"7.0","Year":"2012"},
        {"Revenue":"6.5","Year":"2013"}
       ]

I want year at x axis and revenue at y axis for an area chart.Currently I am using time scale for x axis but i dont know how to use it as I have not date format I have only Years to represent.

My Current code is:

 var margin = { top: 20, right: 20, bottom: 30, left: 50 },
                width = 500 - margin.left - margin.right,
                height = 300 - margin.top - margin.bottom;
            var parseDate = d3.time.format("%Y").parse;

            var x = d3.time.scale()
                      .range([0, width]);


            var y = d3.scale.linear()
                .range([height, 0]);
            var xAxis = d3.svg.axis()
                            .scale(x)
                            .orient("bottom");

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


            var area = d3.svg.area()
                .x(function (d) { return x(d.Year); })
                .y0(height)
                .y1(function (d) { return y(d.Revenue); });
            $("#chartArea").html("");
            var svg = d3.select("#chartArea").append("svg")
                        .attr("width", width + margin.left + margin.right)
                        .attr("height", height + margin.top + margin.bottom)
                      .append("g")
                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            x.domain(d3.extent(localData, function (d) { return d.Year; }));
            y.domain([0, d3.max(localData, function (d) { return d.Revenue; })]);
            svg.append("path")
                 .datum(localData)
                 .attr("class", "area")
                 .attr("d", area)
                .attr("fill",color);
            svg.append("g")
                      .attr("class", "x axis")
                      .attr("transform", "translate(0," + height + ")")
                      .call(xAxis);

            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
            .append("text")
              .attr("transform", "rotate(-90)")
              .attr("y", 6)
              .attr("dy", ".71em")
              .style("text-anchor", "end")
              .text("Revenue (M)");

Currently I am getting on my X axis as .011,.012,013,.014 I need as 2011,2012,2013,2014 I am new to D3 js so dnt know much about how to use scales??Please Help anyone..Thanks in advance.

Answer 1

Just add tick Format to your x Axis definition:

  var xAxis = d3.svg.axis()
              .scale(x)
              .orient("bottom")
              .tickFormat(d3.time.format("%Y")); // <-- format

Answer 2

In v4, it'd be something like this:

d3.axisBottom(x).ticks(d3.timeYear.every(1))

Answer 3

huan feng is right. The time scale is treating your year(implicitly converted to an int) as timestamps. To force the scale to operate on the year, create Date objects specifying the year in it. Basically change the following line:

x.domain(d3.extent(localData, function (d) { return d.Year; }));

to

x.domain(d3.extent(localData, function (d) { return new Date(parseInt(d.Year),0); }));

You may then use Klaujesi's solution to change the tickFormat.