Hiding axis tick marks at zero

[Denis Papathanasiou]

Is this possible, using either the d3.format() method or some other function?

I have a scatterplot whose x and y data domains both run from negative to positive, and while tick marks on both the positive and negative scales are useful, the tick labels right at 0,0 are distracting.

Can these be removed?

I did try modifying the tick format function, from this:

var siFormat = return d3.format("s");

to this:

var siFormat = function (d) {

    if( d !== 0 ) {

        return d3.format("s");

    } 

};

but this created a thick black bar under the x axis, i.e., it was printing a tick label for *every* value of d except zero, ignoring the parameter passed to .ticks() -- 10 -- in the axis definition.

So I tried this, to limit the number of times d3.format() was actually returned, based on the size of d: 

var siFormat = function (d) {

    if( d !== 0 && d % 100000 === 0 ) {

        console.log(d);

        return d3.format("s");

    } 

};

According to the console, only 10 values of d fit the criteria, which matched the desired .ticks() value, but the number of tick labels printed was the same.

So is there a better way to do this?

[Ian Johnson]

You can use .tickValues to explicitly set the ticks you want.

You might try selectAll('.tick') and filter that for value 0 and remove. The axis component generates svg for you, so rather than get it to generate the exact thing, take the attitude that you will modify what it generates.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Denis Papathanasiou]

Thanks for suggesting the select all + remove idea. This did the trick for me:

svg.selectAll(".tick")

    .each(function (d) {

        if ( d === 0 ) {

            this.remove();

        }

    });

[Chris Viau]

or a simpler version:

svg.selectAll(".tick")

    .filter(function (d) { return d === 0;  })

    .remove();

Chris

--