1

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

这是时间线在绘图表中的样子：

默认可绘制时间轴

我可以在当前应用程序中直接使用 Plottable 时间轴吗？如果是，如何？

（或者是否有另一个库可以很容易地做与 plottable 相同的事情？）

一些背景

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

可绘制时间与 D3 标准行为

我目前像这样创建我的时间轴：

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

1 回答 1

3

很高兴你喜欢时间轴。您可以将 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。

于 2015-10-15T23:22:09.913 回答