1

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:

Default Plottable time axis

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:

Plottable time vs D3 standard behaviour

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)
dacwe
  • 43,066
  • 12
  • 116
  • 140

1 Answers1

3

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.

jtlan
  • 341
  • 1
  • 4