Custom tick size on axis (d3js)

Question

I am creating a svg x-y-chart in d3.js. Is it possible to create ticks of different lengths depending on tickValue?

I have made my own tickFormat function myTickFormat and use that in .tickFormat([format]) and that works fine because [format] is expected to be a function. But it is not possible to do the same with .innerTickSize([size]), which expects a number.

E.g. if I want the tick at value 70 to be longer I want to do something like this:

var myTickSize = function(d) {
    if (d === 70) { return 20;}
    return 6;
};

But when I use myTickSize as argument to .innerTickSize():

var yScale = d3.scale.linear();
var yAxis = d3.svg.axis()
               .scale(yScale).orient("left")
               .innerTickSize(myTickSize);

I get an Error: Invalid value for attribute x2="NaN" error for each tick.

Booking

The above solution works, but FWIW in an observablehq cell context I find I have to call the function with parentheses, e.g. ".innerTickSize(myTickSize())" instead of ".innerTickSize(myTickSize)". – Ellita

Answer 1

The tickSize function can only accept a number as argument, not a function, but there are other solutions.

The easiest approach? After the axis is drawn, select all the tick lines and resize them according to their data value. Just remember that you'll have to do this after every axis redraw, as well.

Example:
https://jsfiddle.net/zUj3E/1/

Key code:

d3.selectAll("g.y.axis g.tick line")
    .attr("x2", function(d){
    //d for the tick line is the value
    //of that tick 
    //(a number between 0 and 1, in this case)
       if ( (10*d)%2 ) //if it's an even multiple of 10%
           return 10;
       else
           return 4;
    });

Note that the tick marks at the max and min values are also drawn as part of the same <path> as the axis line, so shortening them doesn't have much effect. If you don't like that lack of control, declare the "outer" ticks to have zero length when you set up the axis. That turns off the corners of the path, but the outer ticks will still have lines that you can control the same as the other tick lines:

var axis = d3.svg.axis()
    .tickSize(10,0)

Example: https://jsfiddle.net/zUj3E/2/

If that doesn't work, google for examples of major/minor tick patterns. Just make sure the example you're looking at uses d3 version 3: there were a few extra tick-related methods added in version 2 that are no longer supported. See this SO Q&A.

Aldrich

.tickSize(10) – Vickeyvicki

Answer 2

Variant on the answer that suits my requirements. Picked the values I just wanted tick marks for instead of ticks and value, added the "hide" class. But this can be used for any variation on the theme.

            var gy = humiditySVG.append( "g" )
                .attr( "class", "y axis" )
                .attr( "transform", "translate(" + 154 + "," + 0 + ")" )
                .call( yAxis );

            humiditySVG.selectAll( "text" )
                .attr( "class", function ( d ) {
                                           if ( $.inArray(d, [0,50,100])==-1  ) {
                               return "hide";
                           }
                           return;
                       } );
            humiditySVG.selectAll( "line" )
                .attr( "x2", function ( d ) {
                           if ( $.inArray(d, [0,50,100])==-1  ) {
                               return 1;
                           } else {
                               return 3;
                           }
                           return;
                       } );

Mongolism