How can I get a D3 Data Driven Document to display a .js point in time in the correct time zone?

Question

I am developing a one-page AngularJS application that uses charts D3to display data recorded in different time zones around the world. The time axis on the graph should display the time in the original time zone.

The data to build is an array of values, pairs of timestamps. The timestamp contains its own time zone information and is encoded in ISO format(for example, "2003-12-14T12:00:00.000+08:00"). So json looks something like this:

"values": [
   ["2003-12-14T12:00:00.000+08:00", 10],
   ["2003-12-14T13:00:00.000+08:00", 20],
   ["2003-12-14T14:00:00.000+08:00", 30],
   ["2003-12-14T15:00:00.000+08:00", 40],
   ["2003-12-14T16:00:00.000+08:00", 50]
]

The timestamp and value are then added to the object, where the timestamp is instantly converted:

data = values[1];
timeStamp = moment.parseZone(values[0]);

D3 . , D3, . - , .

xAxis.tickFormat , , , Date Javascript .

, (- DST), .

Answer 1

, , , , @LarsKotthoff.

:

xAxis = d3.svg.axis()
    .scale(xScale)
    .tickValues(calculateTickValue)
    .tickFormat(getTickFormat);

var getTickFormat = function(date){
    var diff = date.format("DD") != previousDate.format("DD");                    
    if (diff){
        previousDate = date;
        return date.format("MMM Do, HH:mm");
    }
    return date.format(tickFormat);
}

var calculateTickValue = function(){
    var startTime = scope.segment.startTime;
    var endTime = scope.segment.endTime;
    var tickValues = [];
    var difference = moment.duration(endTime.diff(startTime));
    var maximumTicks = calculateMaximumTicks(); 
    if (difference.asHours() >= maximumTicks){
       tickValues = calculateHoursTicks(startTime, endTime, maximumTicks);
       tickFormat = "HH:mm";
    }
    else {
        tickValues = caclulateMinutesTicks(startTime, endTime, maximumTicks);
        tickFormat = "HH:mm";
    }

    previousDate = startTime;
    return tickValues;
}

, , , , , , ..