Create a D3 axis without tick labels

Question

How can I create a D3 axis that does not have any labels at its tick markers?

Here's an example that shows what I'm after, from Mike Bostock no less. There are several Axis objects rotated around the centre, and only the first one has tick labels.

In this case, he's achieved the result using CSS to hide all but the first axis's labels:

.axis + .axis g text {   display: none; } 

However this still results in the creation of SVG text elements in the DOM. Is there a way to avoid their generation altogether?

Answer 1

I'm just going to leave this here since people are likely to end up on this question. Here are the different ways you can easily manipulate a D3 axis.

• Without any ticks or tick labels:

  d3.svg.axis().tickValues([]); 

  No line or text elements are created this way.

• Without ticks and with tick labels:

  d3.svg.axis().tickSize(0); 

  The line elements are still created this way.

  You can increase the distance between the tick labels and the axis with .tickPadding(10), for example.

• With ticks and without tick labels:

  d3.svg.axis().tickFormat(""); 

  The text elements are still created this way.