score:1

Accepted answer

The answer is to write a method which calculates and returns the tick values, and similarly the tick formats, as given by this link from @LarsKotthoff.

The final code needs to be something like this:

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

Obviously, depending upon the scale you need this can be customised for years, months, days, hours etc.


Related Query