Why are the labels on my D3 axis inconsistent (e.g. month, day)?

I am trying to create a D3 X axis with a timeline.

The x-axis signs are displayed inconsistently:

Sat 09 Aug 10 Mon 11 Tue 12 Wed 13 Thu 14 Fri 15 Sat 16 Aug 17

      

I have placed my code in this script to illustrate: http://jsfiddle.net/vh343kmc/2/

I think this is a time formatting issue, but I'm not sure. Any idea on what is going wrong?

+3


source to share


1 answer


You had a good time format, but you must tell yours xAxis

:

var xAxis = d3.svg.axis()
    .scale(x)
    .tickSize(1)
    .tickFormat(format) // <------ add this line
    .orient("bottom");

      



The axis will be changed here. (Note that you may need to tweak how the axis is drawn due to sizing constraints.)

updated axis

+2


source







All Articles