D3 Time Axis in a specific time zone

问题:

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

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.

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

回答1:

Borrowed from this question: How do I include newlines in labels in D3 charts?

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. You can do more filtering to remove ticks for 06:00 and 18:00 as well if needed.