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 sev

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.

Answer 2

You can't avoid the generation of the text elements without modifying the source. You can however remove those elements after they have been generated:

var axisElements = svg.append("g").call(axis);
axisElements.selectAll("text").remove();

Overall, this is probably the most flexible way to approach this as you can also remove labels selectively. You can get the data used to generated them from the scale you're using (by calling scale.ticks()), which would allow you to easily do things like remove all the odd labels.

Answer 3

Create a D3 axis without tick labels

A tick mark without a label can be created by using a function that returns an empty string. This works in both the Javascript and Typescript versions of D3.

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

Further explained on github @types/d3-axis https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24716#issuecomment-381427458