Hide Tick Labels in D3 on Line Graph

Question

I am new to D3 and just had a quick question about tick labels on line graphs made with D3. I am using d3.svg.axis.scale().tickSize().tickSubdivide() to generate my tick marks.

Is there a way to hide them or to change their value? For example, I have a line graph where the tick labels are the intervals (1, 2, 3, etc) and I'd like to change them to strings like ('Jan', 'Feb', 'Mar', 'Apr', etc). Is that possible?

Thanks!

Answer 1

You can hide the tick format like so:

myGraph.yAxis.tickFormat(function (d) { return ''; });

Answer 2

Yes, it is possible to generate different formats for your ticks. You can find some details here: https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickFormat . Unfortunately not all formats are currently documented, so you may want to take a look at the d3 code for that method. If you have both xAxis and yAxis you can do something like:

myGraph.yAxis.tickFormat(d3.format(',.2%'));

Also have a look at Bob Monteverde's charting library: https://github.com/novus/nvd3 (especially in the sources folder, at the axis components), if you want to see lots of tricks related to axis components and axis tick formatting.

If on the other hand you don't want the ticks displayed, then I guess you can create an axis component without ticks (I did not try this, tough), but I don't see the point in doing that when you have custom formatters and you can do virtually anything you want with the ticks.

Best regards!