Search code examples
d3.jsnvd3.js

What does the second argument do in the .tickSize(10, 1) in d3.axis?

I have been going through some code and I encountered .tickSize(10,1) and .tickSize(10, 0) I know the first argument fixes the tickSize. Can anybody explain what the second argument do?

Solution

  • It sets the size of the first and last ticks on the axis. You can play with it here to see what changing the second parameter does but here are some screenshots to demonstrate it:

        var axis = d3.svg.axis()
        .scale(scale)
        .orient("right")
        .ticks(10)
        .tickSize(10,1) // <-------------- Set outer tick size to 1
        .tickFormat(formatPercent);

    Rendered Axis:

    enter image description here

    Changing the code to .tickSize(10,50) results in an axis that looks like the following (notice the size of the first and last 'outer' ticks):

    enter image description here