D3.js: x-axis with variable interval between ticks

Question

I'm having an issue with the D3.js library. I'm trying to plot out chromosomal data in a graph where the x-axis represents the different chromosomes. This is easy enough done for barcharts etc.

However, I would like to plot linear data based on the chromosomal position. The size of the interval between the ticks should also correlate to the size of the chromosome.

My question is, which scale should I use? I don't think a linear scale would fit this purpose. I've read something about threshold scales, but I don't know if this is the best option. Does anyone have a better idea?

Thanks! M

tl;dr: I need an x-axis with variable intervals between the ticks, based on linear data, how do I go about it?

EDIT: Image with example

Answer 1

Found the answer!

I just needed to use a linear scale with custom ticks. This can be set by using the tick formatting options.

//set axis
xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(chrInfo.length)
.tickValues(d3.set(chrInfo.map(function(d) {return d.end;})).values())
.tickFormat(function(d){return d.chr;})
.tickSize(-(height), 0, 0);