jiahuang / d3-timeline

Simple JS timeline plugin for d3
1.04k stars 281 forks source link

Show time/days since start on x axis instead of date #58

Closed inodb closed 9 years ago

inodb commented 9 years ago

Currently the timeline shows the date on the x axis. In certain situations it would be more useful to show number of days/time since the first event. Do you have any tips on how to add this to d3-timeline?

jiahuang commented 9 years ago

You want to have a custom format function to be called on line 114. I think something like this will work (haven't tried it though, so not 100% sure)


var chart = d3.timeline()
          .tickFormat(
            {format: function(d){ return d - startTime; },
            tickTime: d3.time.hours,
            tickInterval: 1,
            tickSize: 30})
inodb commented 9 years ago

Thanks a lot for the quick reply! Using your tip and playing around a bit using the relative timepoints example I got what I wanted.

For my problem I needed days since the first event. So with data like this:

var testDataRelativeDays = [
  {times: [{"starting_time": 1, "ending_time": 2}, {"starting_time": 2, "ending_time": 3}]},
  {times: [{"starting_time": 3, "ending_time": 4}]},
  {times: [{"starting_time": 5, "ending_time": 6}]},
];

get a plot like: screen shot 2015-06-02 at 3 26 29 pm using call:

var chart = d3.timeline()
  .relativeTime()
  .tickFormat({
    format: function(d) { return d3.time.format("%_d d")(d3.time.day.offset(new Date("2000-01-02"), d.valueOf()))},
    tickInterval: 1,
    tickSize: 15,
  });