How to specify the number of axis labels in d3?

Question

I created a simple histogram in d3 and format the y axis with ".ticks (3)", indicating that I would like to see 3 labels. However, depending on the data, I sometimes see 3 tags, and sometimes see 4. In addition, even when I have 3 tags, the ticks are about 1/4 above the axis label, and then 50%, then another on 3/4. How to make d3 set 3 axis marks, one at the bottom, one in the middle and one at the top?

Answer 1

You can pass an array of ticks to the axis, and then the axis will build checkmarks at the points of the array.

Here is a sample code. An axis is created that runs from 0 to 100. Mark marks are displayed at 0, 50, 60 and 100 in accordance with the tick array.

svg = d3.select("svg") var myScale = d3.scale.linear() .domain([0,100]) .range([0,400]); var ticks = [0,50,60,100]; var myAxis = d3.svg.axis() .scale(myScale) .tickValues(ticks); svg.append("g") .attr("class", "axis") .call(myAxis) .attr("transform","translate(100,100)"); 

Here is an interactive example: http://tributary.io/inlet/5207532