在人力车中格式化X轴，从0ms开始，并自动从ms演变为秒

Question

我正在使用人力车绘制遗传算法随时间的演变。所以我想在流媒体中提供图表，并从0开始查看x-Axys中的时间。

我目前正在使用动态推送流式搜索结果，例如：

var data = { x: new Date().getTime(), y: N) };
graph.series[0].data.push(data);
graph.render();

我正在配置像这样的x-Axys：

var axes = new Rickshaw.Graph.Axis.Time({
  graph: graph
} );

我实现的结果是时间线上有奇怪的时间，如45，然后是02:00，然后是13:00。 我需要的是类似的东西 ______________ | | |
0s 1s 2s 演变为 ________________ | | |
0s 5s 10s 任何人都有一些提示？

Answer 1

我刚刚找到了一个可能的答案。

// Declare the starting time
var startTime = new Date().getTime();

// format time to appear only the seconds
var format = function(d) {
  d = new Date(d);

  var seconds = Number(d3.time.format("%S")(d));
  if (seconds === 0) {
    return Number(d3.time.format("%L")(d)) + ' ms';
  } else {
    return seconds + ' s';
  }
};

var x_axis = new Rickshaw.Graph.Axis.X({
  graph: graph,
  tickFormat: format,
});

// Push new value
// Subtract startTime to the current time
var currTime = new Date().getTime() - startTime;
var data = { x: currTime, y: N) };
graph.series[0].data.push(data);

// Render the graph
graph.render();

您可以在此链接中查看D3中的更多时间格式：http://www.d3noob.org/2012/12/formatting-date-time-on-d3js-graph.html