D3时间轴类plottable.js

Question

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

这是时间线在可绘制中的样子：

​

​

我可以直接使用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。