D3 Millisecond tick interval issue

Question

var xAxis = d3.svg.axis()
      .scale(timeScale)
      .orient('bottom')
      .ticks(d3.time.millisecond, 100)
      .tickSize(-h + theTopPad + 20, 0, 0)
      .tickFormat(d3.time.format('%S:%L'));

1. Range of my data is 0-3000ms. The above code displays it as 00:100, 00:200, 00:300; which is very messy since most of the expected data will be below 1000ms.
   I'm looking for something like '100, 200,....900, 1000, 1100' i.e. without overlapping over 'seconds'.
   If that's not possible, then the next best alternative would be '0:100, 0:200, 0:300 ... 1:100' i.e. without the 'seconds's leading zero.
   Is any of this possible?

2. More Importantly, the spacing of the ticks seems to be stuck to '100ms'. If I change it to .ticks(d3.time.millisecond, 50) or anything else, it doesn't make a difference. Bug?

EDIT: I got the answer to the first question. Simply use:

var tickformatter = d3.format("f")

.tickFormat(function(d) { return  tickformatter(d) + "ms"; });

FIDDLE: http://jsfiddle.net/Q5Jag/613/

Answer 1

You don't need to use d3.time.format.

In the fiddle, replace

d3.time.format('%Lms')

with

function(d) { return d.getTime()+"ms"; }

And your ticks are stuck by 100ms since there is no d3.time.millisecond, thus it falls back to the default: 10 ticks. You could use the difference of the extent of your timescale and divide it by 50, that's the number of ticks you want to pass directly into axis.ticks().

Answer 2

In your code replace below code

var xAxis = d3.svg.axis()
      .scale(timeScale)
      .orient('bottom')
      .ticks(d3.time.millisecond, 50)
      .tickSize(-h + theTopPad + 20, 0, 0)
    .tickFormat(d3.time.format('%S:%L'));

Instead of

var xAxis = d3.svg.axis()
      .scale(timeScale)
      .orient('bottom')
      .ticks(d3.time.millisecond, 50)
      .tickSize(-h + theTopPad + 20, 0, 0)
      .tickFormat(d3.time.format('%Lms'));