d3.js默认axis.tickFormat为24小时制

Question

我非常喜欢axis.tickFormat在绘制事物时的默认行为，只是像这样创建我的x轴：

var xAxisBottom = d3.svg.axis().scale(xScale);

我正在使用画笔功能，因此用户可以沿x轴缩放，因此它的值必须相应地更新。如果用户查看整年的数据，那么带月份的滴答是好的。如果用户查看一天中的数据，则小时和分钟的刻度是好的。等等。

好处是轴的默认行为是这样的。不好的是它显示了上午/下午的小时数，我想将其改为24小时制。

我知道我可以根据画笔的当前范围设置我自己的tickFormat，但在这种情况下我不知道如何得到类似下图的图片，其中混合了不同的格式。

那么，是否有一种简单的方法可以获得24小时制而非AM / PM？

Answer 1

在“调用单行代码”中并不容易，但您可以轻松地滚动自己的时间格式。有关示例，请参阅here。关键的想法是你有一个日期格式列表和一个过滤函数，如果要使用相关的格式，给定日期时返回true。在您的情况下，您只需要两个级别，一个显示日期（如果日期是午夜）或时间（如果日期是中午12点）。

Answer 2

值得注意的是，如果您在轴上使用UTC时间而不是本地时间，那么d3会在内部调用另一组格式化程序。你需要这个：

          return (d3.utcSecond(date) < date ? formatMillisecond
          : d3.utcMinute(date) < date ? formatSecond
          : d3.utcHour(date) < date ? formatMinute
          : d3.utcDay(date) < date ? formatHour
          : d3.utcMonth(date) < date ? (d3.utcWeek(date) < date ? formatDay : formatWeek)
          : d3.utcYear(date) < date ? formatMonth
          : formatYear)(date);

而不是上面链接示例中引用的调用。更改是替换＆＃34; d3。 utc XXX（日期）＆＃34; for＆＃34; d3。时间 XXX（日期）。＆＃34;

Answer 3

对于d3 v4及更高版本。 为刻度指定axisBottom的时间

//Print ticks for every minute
this.xAxis = axisBottom(this.xScale).ticks(timeMinute.every(1));

//Print ticks for every hour
this.xAxis = axisBottom(this.xScale).ticks(timeHour.every(1));

否则，您可以勾选format以将值格式化为PM