Question

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

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

我将使用timezone-js库在中央时间格式化标签。唯一的问题是D3在本地时区创建了刻度（在我的情况下是东部时间），因此刻度不会落在中心时区边界上。请参阅jsFiddle here。我该如何解决这个问题，以便滴答声落在白天的边界上。

相关问题 - 如何正确创建d3.time.format函数以将标签自定义为中心时间。我现在拥有的是以下内容，但此函数始终返回日期和时间。我希望它能在日期边界和中午返回日期。

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

Answer 1

借用这个问题：How do I include newlines in labels in D3 charts?

你可以像这样添加一个解析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);

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

D3时间轴在特定时区

1 个答案: