d3 ticks only shows Sundays:

Question

I would like for my scale to start on the first day and end on the last day rather than just show Sundays:

I would like for the data to start at : 28 (not 3) but it starts on a 3 which is Sunday:

How can i start my scale on any day of the week?

I want the days shown to match the data I give the graph not show Sundays.

Link to example: http://jsfiddle.net/3LZua/2/

Thanks in advance.

P.S. Here is the code: (there would be a in the html)

followerLineGraph = function(data)
{    
    var width = 400;

    var x = d3.time.scale()
        .domain([data[0].date, data[data.length - 1].date])
        .range([0, width]);

    var chart = d3.select("#test").append("svg").attr("class", "chart");

    //Date Label
    var xAxis = d3.svg.axis()
        .scale(x)
        .ticks(data.length)
        .tickFormat(d3.time.format('%m/%d-%a'))
        .tickSize(0)
        .tickPadding(8);

    chart.append('g')
        .attr('fill', '#1ff')
        .call(xAxis);
}

    var data = [
      { date: new Date(2013, 1, 28), TotalLikes: 18 },
      { date: new Date(2013, 2, 14), TotalLikes: 15 },
      { date: new Date(2013, 2, 21), TotalLikes: 17 },
      { date: new Date(2013, 2, 28), TotalLikes: 17 },
      { date: new Date(2013, 3, 4), TotalLikes: 20 }
];

followerLineGraph(data);

Answer 1

I was just faced with a very similar problem and I was not able to find an answer in the d3 documentation. However, I took a peek at the d3 source code (https://github.com/mbostock/d3/blob/master/d3.js) and I was able to find the following line:

d3.time.weeks = d3.time.sunday.range;

With this hint in mind: Note that, as described in the documentation,

var xAxis = d3.svg.axis()
   .scale(x)
   .ticks(d3.time.weeks, 1);

gives an axis with a tick on every Sunday — and so

var xAxis = d3.svg.axis()
   .scale(x)
   .ticks(d3.time.xxxday.range, 1);

gives an axis with a tick on every xxxday, where xxxday is monday, tuesday, wednesday, thursday, friday, saturday, or sunday.

Answer 2

You have a few choices here.

Calling "ticks" on the axis will pass the arguments to the underlying scale to get a list ticks for the axis to draw. When you pass in a single numeric value the scale will attempt to produce "nice" values. The numeric value is a hint as to how many ticks you might ideally like - it is no guarantee of the number you will actually receive.

.ticks(5)

results in: 03/03-Sun 03/10-Sun 03/17-Sun 03/24-Sun 03/31-Sun

Because you are using a time scale you also have the option to specify the amount of time between ticks, e.g.:

.ticks(d3.time.days,7)

results in: 03/01-Fri 03/08-Fri 03/15-Fri 03/22-Fri 03/29-Fri 04/01-Mon

This will give you a tick every 7 days. But I think it will still try to include "nice" time boundaries like month start.

For fine tuned (but somewhat static) situations you can actually specify exactly where you want your ticks to be using the tickValues methods on the axis. I used it to set exactly all your data point's dates:

xAxis2.tickValues(data.map(function(d) { return d.date;}))

Finally, you can actually pass in an argument to the ticks function to get exactly the ticks you want every time. The function will get the start and end so to set the ticks to those plus the midpoint I did:

xAxis3.ticks(function(start, end) {
    console.log(arguments);
    var mid = new Date((start.getTime() + end.getTime()) / 2);

Though in this case you should probably set the function on the scale so then you can make use of the step arguments by calling through the axis (see more in the d3 documentation).

You can play with the fiddle here.

Also check out the documentation for the scale ticks and the axis tickValues. There is also a great axis tutorial here.