d3.js - Change the ticks on x-axis

Question

I am trying to figure out d3.js. While defining the axis, How can I get custom labeling on x-axis. For example, the default labeling I get is:

|------|------|------|------|------|------|
20    30     40     50     60     70     80

Whereas, I want something like:

|------|------|------|------|------|------| ....
20    26      32    38     44     50     56

I am currently learning it and working on code (slightly modified) from official examples supplied:

var xAxis = d3.svg.axis().scale(x).tickPadding(7).orient("bottom");
var yAxis = d3.svg.axis().scale(y).tickPadding(5).orient("left");

Answer 1

The default ticks for quantitative scales are multiples of 2, 5 and 10. You appear to want multiples of 6; though unusual, this could make sense depending on the nature of the underlying data. So, while you can use axis.ticks to increase or decrease the tick count, it will always return multiples of 2, 5 and 10 — not 6.

If you want multiples of 6, you can use axis.tickValues to specify the tick values explicitly. This is typically used in conjunction with d3.range. For example:

xAxis.tickValues(d3.range(20, 80, 4));

If you want to compute the values dynamically, use the x-scale’s domain to retrieve the lowest and highest value. Also keep in mind that the upper bound of the range is exclusive, so in the above example the largest tick value is 76. You can make the upper bound inclusive by making the stop value of the range slightly bigger (e.g., 81).