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。

D3时间轴喜欢plottable.js

D3 time axis like plottable.js

javascript

coffeescript

d3.js

plottable