D3特定时区的时间轴

Question

我正在尝试在中央时区创建一个时间轴，如下所示-每天的大刻度，中午12:00的小刻度。

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

我将使用timezone-js库在中央时间格式化标签。唯一的问题是D3在本地时区(在我的例子中是东部时间)创建刻度，所以刻度不会落在中央时区边界上。请参阅此处的jsFiddle。我怎样才能解决这个问题，使刻度落在一天的边界上。

相关问题-如何正确创建d3.time。格式化功能，自定义标签为中央时间。我现在拥有的是以下内容，但是这个函数总是返回日期和时间。我希望它返回日期边界上的日期和中午的时间。

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

Answer 1

借鉴这个问题:我如何在D3图表的标签中包含换行符?

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

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

小提琴。如果需要，您还可以对06:00和18:00进行更多的过滤以删除刻度。