D3 time axis like plottable.js

Question

I have D3 web app and today I use a standard d3.svg.axis to display a time axis. I would like to change this to a time axis like the one Plottable implements, e.g. the Plottable.Axis.Time version.

This is how the time line looks in plottable:

Can I directly use the Plottable time axis in my current app? And if yes, how?

(Or is there another library that is easy to do the same thing as plottable?)

---

Some background

This is a screenshot from http://plottablejs.org/examples/linechart/ showing the differences between D3 and Plottable:

I currently create my time axis like this:

@x = d3.time.scale()
  .domain([@model.get('viewableTimeRange').start, @model.get('viewableTimeRange').end])
  .range([0, 500])

@xAxis = d3.svg.axis().scale(@x).orient("bottom").tickSize(10, 0).tickPadding(6)

And laying it out like this:

@svg
  .select("g.x.axis")
  .attr("transform", "translate(0," + (@canvasHeight  - 50) + ")")
  .call(@xAxis)

Answer 1

Glad you like the time axis. You can render a Plottable time axis by itself to a separate SVG:

var scale = new Plottable.Scales.Time();
var axis = new Plottable.Axes.Time(scale, "bottom");
axis.renderTo("#yourSVG");

It's also possible to manually lay out the Axis:

axis.anchor(svg.select("g.x.axis"));
axis.computeLayout(origin, width, height);
axis.render();

In either case, you'll want to update the Axis using scale.domain() whenever the domain changes.

You might also consider using Plottable for the entire chart.