8

我真的很喜欢axis.tickFormat在随时间绘制事物时的默认行为，并且像这样创建我的x轴：

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

我正在使用画笔功能，以便用户可以沿 x 轴缩放，因此它的值必须相应更新。如果用户查看一整年的数据，则以月份为单位是好的。如果用户在一天内查看数据，则以小时和分钟为单位是好的。等等。

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

我知道我可以根据画笔的当前跨度设置自己的 tickFormat，但在这种情况下，我不知道如何获得如下图所示的内容，其中混合了不同的格式。

在此处输入图像描述

那么，有没有一种简单的方法来获得 24 小时制而不是上午/下午？

4

3 回答 3

9

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

于 2013-03-27T08:54:43.400 回答
3

值得注意的是，如果您在轴上使用 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);

而不是上面链接示例中引用的调用。更改是将“ d3.utc XXX(date)”替换为“ d3.time XXX(date)” 。

于 2017-02-04T18:10:55.577 回答
0

对于 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));

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

于 2020-02-04T07:30:02.810 回答