javascript - 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() 更新轴。

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