autoscale and format x axis in dimple.js

Question

I would like a chart that autoscales the x axis according to the data size and shows only specific numbers, and for the rest of data points only show the tick lines without numbers. Something like this:

In this example the length of the data is between 75 and 155, so it shows the numbers multiple of 20. Then for each interval there are 5 equally spaced tick lines.

Until now I've been able to edit the ticks with the cleanAxis function suggested here: How do you reduce the number of Y-axis ticks in dimple.js?. I did something like this for scaling the axis:

    if (data.length < 10) {
        cleanAxis(myAxis, 2);
    }
    if (data.length >= 10 && data.length < 75) {
        cleanAxis(myAxis, 10);
    }
    if (data.length >= 75 && data.length < 155) {
        cleanAxis(myAxis, 20);
    }
    if (data.length >= 155) {
        cleanAxis(myAxis, 50);
    }

This shows the number the way I want but also erased the ticks lines. Is it possible to do what I want in dimple.js?

Answer 1

For reference, here's the cleanTicks function, courtesy of @JohnKiernander.

// Pass in an axis object and an interval.
var cleanAxis = function (axis, oneInEvery) {
    // This should have been called after draw, otherwise do nothing
    if (axis.shapes.length > 0) {
        // Leave the first label
        var del = 0;
        // If there is an interval set
        if (oneInEvery > 1) {
            // Operate on all the axis text
            axis.shapes.selectAll("text").each(function (d) {
                // Remove all but the nth label
                if (del % oneInEvery !== 0) {
                    this.remove();
                    // Find the corresponding tick line and remove
                    axis.shapes.selectAll("line").each(function (d2) {
                        if (d === d2) {
                            this.remove();
                        }
                    });
                }
            del += 1;
            });
        }
    }
};

The portion that removes the lines is here:

// Find the corresponding tick line and remove
axis.shapes.selectAll("line").each(function (d2) {
    if (d === d2) {
        this.remove();
    }
});

so if you wanted that to be removed less frequently, you can just do another modulo check:

var cleanAxis = function (axis, labelEvery, tickEvery) {
    // This should have been called after draw, otherwise do nothing
    if (axis.shapes.length > 0) {
        // If there is an interval set
        if (labelEvery > 1) {
            // Operate on all the axis text
            axis.shapes.selectAll("text").each(function (d, i) {
                // Remove all but the nth label
                if (i % labelEvery !== 0) {
                    this.remove();
                }
                if (i % tickEvery !== 0) {
                    // Find the corresponding tick line and remove
                    axis.shapes.selectAll("line").each(function (d2) {
                        if (d === d2) {
                            this.remove();
                        }
                    });
                }
            });
        }
    }
};