javascript - 使用 d3.js 在 x 轴上显示相对时间

标签 javascript d3.js nvd3.js

我正在尝试使用 nvd3.js 显示随时间推移的评分(近乎实时;数据每 3 分钟更新一次)。现在数据似乎正确显示,除了 x 轴显示的纪元时间不太可读。如何让 x 轴显示“x 分钟前”而不是纪元时间?

这是我使用的代码:

nv.addGraph(function() {
  var chart = nv.models.lineChart();

  chart.xAxis
      .axisLabel('Time')
      .tickFormat(d3.format('r'));

  chart.yAxis
      .axisLabel('Rating')
      .tickFormat(d3.format('.2f'));

  d3.select('#chart svg')
      .datum(data())
    .transition().duration(500)
      .call(chart);

  nv.utils.windowResize(chart.update);

  return chart;
});

function data() {
  var data = [ { x: 1345457533, y: -0.0126262626263 },
               { x: 1345457409, y: 0.0224089635854 },
               { x: 1345457288, y: 0.0270935960591 },
               { x: 1345457168, y: -0.0378151260504 },
               { x: 1345457046, y: -0.115789473684 } ]

  return [
    {
      values: data,
      key: "Sample1",
      color: "#232066"
    }
  ];
}

最佳答案

为标签使用自定义格式功能,例如moment.js .类似的东西

function myFormat(d) {
  return moment(d * 1000).fromNow();
}

关于javascript - 使用 d3.js 在 x 轴上显示相对时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12042222/

相关文章:

onclick - nvd3.js : unable to bind onClick event with the data points in the svg

javascript - 从 Firefox Addon 中的 JS-Chrome-Content 功能自动建议来源

javascript - 为什么我的 Canvas 除了 Angular 落外都是空白的?

javascript - nvd3捕获堆积面积图上的点击事件

d3.js - d3.event.y 在拖动行为期间具有奇怪的值

javascript - 安装 D3.js 失败

angularjs - 如何将 angularjs-nvd3 图表导出到文件

javascript - rails : Javascript does not work on paginated objects

javascript递归函数不停止执行

javascript - projectionStream 不是 D3.js v4 中的函数