How can I add space in the label of a graph made with dimple.js?

Question

I am doing a barplot with dimple.js. My code is the following:

 var data = [{x:1, y:10}, {x:2, y:15}, {x:3,y:27}]
 var svg;

 var chart;
 var svg = dimple.newSvg("body", 800, 600);

 var chart = new dimple.chart(svg, data);

 chart.defaultColors = [
 new dimple.color("#FF0000", "Blue"), // Set a red fill with a blue stroke
 new dimple.color("#00FF00"), // Set a green fill with a darker green stroke
 new dimple.color("rgb(0, 0, 255)") // Set a blue fill with a darker blue stroke
 ]; 

 x = chart.addCategoryAxis("x", "x");
 chart.addMeasureAxis("y", "y");
 chart.addSeries("country", dimple.plot.bar);
 x.addOrderRule("x");
 chart.draw();

It works fine when I have only three (or few) data points, but when I have more than two hundred data points, the x axis becomes cluttered with the units. Is there a way to show the units in the x label every n points? (so instead of showing 1,2,3... it shows 1, n+1, 2*n+1,...) ?

Answer 1

You can modify it after draw with some d3. Here is a method which will remove the labels leaving every nth one:

// 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 = false;
        // 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;
            });
        }
    }
};

Here's the fiddle working for a case like yours:

http://jsfiddle.net/V3jt5/1/

(I've also updated your order rule to avoid problems with string ordering)