gpt4 book ai didi

date - 如何格式化刷过的时间 Axis (具有上下文相关的值)

转载 作者:行者123 更新时间:2023-12-02 03:14:04 24 4
gpt4 key购买 nike

我有一个 x Axis ,其中 2009 - 2016 年作为 tickValues。当我从时间小部件中选择一个时间段时,刻度值变成月份名称和年份的组合(谢谢你,d3!)。例如,我有“2014 年 12 月,2 月”。选择更窄的范围会给我星期名称和日期,例如“6 月 14 日”。

enter image description here

我希望月份名称显示为缩短格式,例如12 月、2 月。我知道这将是 d3.time.format('%b'),但我不能将 tickFormat 设置为此而不影响年份(它们都显示为“Jan”)。

如何为 d3 时间刻度 Axis 应用上下文相关的 tickFormat?

最佳答案

D3 实现了您描述的自适应行为——它根据值显示月份或年份——使用它自己的构造之一:d3.time.format.multi()。该函数 multi() 需要多个时间格式化选项的数组,d3 根据与每种格式关联的条件选择适当的格式。这就是某些值(例如一年中的第一天)变成年刻度而其他值变成月刻度的方式。

(注意:这在 d3 3.x 中,我猜这就是你正在使用的。d3 4.x 中可能有一个等效项,但我无法在 4.x API 中轻松找到它文档,因此如果您使用的是 4.x,则需要进行更多研究。)

那个多格式函数的documentation提供该时间格式选项数组的默认实现,即如果您不使用自己的格式覆盖它,则 d3 默认使用时间刻度的实现。看起来像这样

var format = d3.time.format.multi([
[".%L", function(d) { return d.getMilliseconds(); }],
[":%S", function(d) { return d.getSeconds(); }],
["%I:%M", function(d) { return d.getMinutes(); }],
["%I %p", function(d) { return d.getHours(); }],
["%a %d", function(d) { return d.getDay() && d.getDate() != 1; }],
["%b %d", function(d) { return d.getDate() != 1; }],
["%B", function(d) { return d.getMonth(); }],
["%Y", function() { return true; }]
]);

因此,您可以首先将该默认实现复制/粘贴到您自己的项目中,将其设置为 Axis 的 tickFormat,然后调整值。具体来说,为了回答您的问题,您需要修改该数组的倒数第二个元素,将其转换为:

["%b", function(d) { return d.getMonth(); }] // from %B to %b

如果您的时间 Axis 恰好总是跨越数月或数天,您还可以删除该数组的前 4 或 5 个元素,因为这些格式永远不会在长时间跨度内发挥作用。

如果这有帮助:如果仍然不清楚上面的格式和函数数组最终是如何产生效果的,想象一下 d 将在今年的 1 号:它会有 0d.getMonth()(因为在 javascript 中,January 是 0),事实上,对于 上面使用的所有方法,该日期都会有零getMonth(如 getDategetHours 等)。所以所有这些函数都会返回 0,在 javascript 中是 false,并且不会使用这些格式。只有最后一个会返回 true(因为它是硬编码的),并且会显示一个年份标记 (%Y)。现在,除一月以外的任何一个月的第一天的刻度将有一个非零的 getMonth() (但 getDay 等仍然为零),所以倒数第二个格式将在这些情况下使用。

关于date - 如何格式化刷过的时间 Axis (具有上下文相关的值),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38095217/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com