2

I'm using the d3 JS library to plot some graphs. It works fine, but I'm stuck on a weird problem which I've been struggling with for an hour - I can't set the x-axis values. Here is the graph (I added an alert that will show you the data format):

http://jovansfreelance.com/bikestats/d3/tipsy.php

I want the x-axis to show years, but for some reason that I can't see anywhere in the code, it's using decimal values instead, so instead of 2006 it has .006 - I have no idea where this is coming form, like it takes out the first digit and divides the rest by 100?!

If someone can point me to the lines of code that are doing this, that would be fine, I can take it from there.

sveti petar
  • 3,637
  • 13
  • 67
  • 144

2 Answers2

1

As pointed out in another answer, a better way of handling time values is to explicitly use time scales. However, to achieve what you want it is sufficient to specify the format for the x axis explicitly. That is, to

var xAxis = d3.svg.axis()
        .scale(x)
        .tickSize(h - margin * 2)
        .tickPadding(10)
        .ticks(7)

add

.tickFormat(d3.format("d"));
Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
0

Could be related to this parseDate = d3.time.format("%Y") not working

If so, you might need

d3.svg.axis()
   .scale(x)
   .tickSize(h - margin * 2).tickPadding(10).ticks(7)
   .tickFormat(function(d) { return d.toString(); }); // force the date value into a string

or, if you need the parse the date

   .tickFormat(function(d) { 
      var fmt = d3.time.format("%Y"); 
      return format.parse(d).toString() 
    });
Community
  • 1
  • 1
widged
  • 2,749
  • 21
  • 25
  • That does change the forma of the x-axis labels - but it turn each label into `Thu Jan 01 1970 01:00:02 GMT+0100 (Central Europe Standard Time)`. I think I may need to fiddle with the `var x = d3.time.scale()` line that comes before that. – sveti petar Mar 13 '13 at 10:48