D3时间轴如plottable.js

Question

我有D3网络应用程序，今天我使用标准d3.svg.axis来显示时间轴。我想将其更改为时间轴，例如一个Plottable工具，例如Plottable.Axis.Time版本。

这是时间线在plottable中的显示方式：

我可以直接在当前应用中使用Plottable时间轴吗？如果是的话，怎么样？

（或者是否有另一个库可以与plottable一样容易做到？）

一些背景

这是来自http://plottablejs.org/examples/linechart/的屏幕截图，显示了D3和Plottable之间的差异：

我目前正在创建我的时间轴：

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

像这样说出来：

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

Answer 1

很高兴你喜欢时间轴。您可以将Plottable时间轴自身渲染到单独的SVG：

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

也可以手动布局Axis：

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

在任何一种情况下，只要域名发生变化，您就会希望使用scale.domain()来更新Axis。

您也可以考虑在整个图表中使用Plottable。