Currently the timeline shows the date on the x axis. In certain situations it would be

You want to have a custom format function to be called on <a href="https://github.com/

Show time/days since start on x axis instead of date about d3-timeline HOT 2 CLOSED

jiahuang commented on August 20, 2024

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

from d3-timeline.

Comments (2)

jiahuang commented on August 20, 2024

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})

from d3-timeline.

inodb commented on August 20, 2024

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:

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,
  });