D3时间轴在特定时区 [英] D3 Time Axis in a specific time zone

问题描述

我试图在中央时区创建一个时间轴，如下所示 - 每天的主要记号，中午12点的次要记号。

I am trying to create a time axis in Central time zone as shown below - major ticks per day, minor ticks at 12:00 noon.

   __________________________
  |        |        |        |
04/24    12:00    04/25    12:00

我将使用 timezone-js 库可以在中央时间格式化标签。唯一的问题是，D3在本地时区（我的情况下，东部时间）创建蜱，所以蜱不落在中央时区边界。请参阅jsFiddle 此处。我如何解决这个问题，以便蜱在日边界上。

I will be using the timezone-js library to format the labels in Central time. The only issue is that D3 is creating the ticks in the local time zone (Eastern time in my case), so the ticks are not falling on the Central timezone boundaries. Please see the jsFiddle here. How can I fix this so that ticks fall on day boundaries.

相关问题 - 如何正确创建一个d3.time.format函数来自定义标签到中央时间。我现在的是以下，但这个函数总是返回日期和时间。我希望在中午的日期边界和时间返回日期。

Related question - How do I correctly create a d3.time.format function to customize the labels to central time. What I have right now is the following, but this function always returns the date and time. I would like it to return dates on date boundaries and time at noon.

var formatDate = function(date) {
    var tzdate = new timezoneJS.Date(date, 'America/Chicago');
    return tzdate.toString('MM/dd HH:mm');
};

推荐答案

借用此问题：如何在D3图表的标签中添加换行符？

您可以添加一个函数来解析X轴，如下所示：

You can add a function to parse the X axis like so:

var parseXaxis = function (d) {
    var el = d3.select(this);
    var dtFormat = d3.time.format('%m/%d %H:%M');
    var words = dtFormat(d).split(' ');
    el.text('');

    if (words[1] == "00:00") {
        el.append('tspan').text(words[0]);        
    }
    else {
        el.append('tspan').text(words[1]);        
    }    
};

svg.selectAll('g.x.axis g text').each(parseXaxis);

Fiddle here 。如果需要，您可以进行更多过滤以删除06:00和18:00的记录。

Fiddle here. You can do more filtering to remove ticks for 06:00 and 18:00 as well if needed.

这篇关于D3时间轴在特定时区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！