n3-charts 动态更改日期的 x 轴标签答案

【问题标题】：n3-charts dynamically changing x-axis label for daten3-charts 动态更改日期的 x 轴标签
【发布时间】：2015-04-25 10:42:33
【问题描述】：

我正在尝试创建一个标签函数，该函数将根据在此website 中选择作为图表的日期范围动态更改 x 轴标签。

为了方便起见，x 轴上的刻度静态设置为 12，而不是根据日期范围动态更改它，我认为这可能相当困难。

假设 1 个月内的日期范围将返回标签为：

一天

6 PM - 9 PM - 星期六 25 - 03 AM - 06 AM - 09 AM - 12 PM - 03 PM - 06 PM - 09 PM - 星期日 26 -凌晨 03 点

一周

周日 10 - 周一 11 - 周二 12 - ... - 周六 16

一个月

27Mar - 29Tue - 31Apr- Fri - 03Apr - 05 Tue - 07 Thu 09 Sat...

使用 d3.time.format("%I:%M %p") 作为 labelFunction 工作，但它不适合动态更改标签。我还尝试创建一个单独的函数 formatDateAxis() 以根据 startDate 和 endDate （以 Unix 纪元毫秒为单位）返回字符串，并根据范围返回格式，但仅返回格式本身失败，例如%I %p。

  $scope.options = {
    axes: {
      x: {key: 'x', labelFunction: d3.time.format("%I:%M %p"), type: 'date', ticks: 12},
      y: {key: 'y1', type: 'linear', min: 20, max: 60, ticks: 5},
      y2: {key: 'y2', type: 'linear', min: 20, max: 60, ticks: 5}
    },
    series: [
      {y: 'value', color: '#0099FF', thickness: '2px', label: 'Temperature', dotSize: 2},
      {y: 'otherValue', axis: 'y2', color: '#6666FF', thinkness: '2px', visible: true, dotSize: 2, label: 'Humidity'}
    ],
    lineMode: 'linear',
    tension: 0.7,
    tooltip: {mode: 'scrubber', formatter: function(x, y, series) {return moment(x).fromNow() + ' : ' + y;}},
    drawLegend: true,
    drawDots: false,
    columnsHGap: 5
  }

根据所选数据源的 startDate 和 endDate 格式化 x 轴的函数。引用自另一个 stackoverflow 帖子 here。

var formatXAxes = function(value) {
  var dateFormat = "";
  if (endDateMillis - startDateMillis > 1468800000) {
    dateFormat = d3.time.format('%a %d');
  }

  else if (endDateMillis - startDateMillis > 172800000) {
    dateFormat = d3.time.format('%a %d');
  }

  else {
    dateFormat = d3.time.format('%I %p');
  }
  return dateFormat;
}

如果能帮助我完成这项任务，为我家绘制一些历史传感器记录，我将不胜感激。

【问题讨论】：

标签： javascript date d3.js n3-charts

【解决方案1】：

您可以通过访问 n3chart options javascript 对象来访问格式化程序说如果你想改变你的 x 轴的格式，你可以这样做：

$scope.options.axes.x.ticksFormat = '%X'

这将自动更新 ticksFormat 并且 n3chart 将实时更新以显示更改。

【讨论】：