Create a D3 axis without tick labels - d3.js

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.

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

Answer 4

I know this is an old question but if you are using D3 version 7 probably this approach will help you.
There are 4 axes: top, left, bottom and right. We will define the left and bottom as main axes, and top and right as tick-less axes.
There are two way to render tick-less axes either declaring empty array for the tickValues function like this:
xAxisTop = d3.axisTop().scale(xScale).tickSize(0).tickValues([])
Or declaring an empty label for the tick using tickFormat function like this:
const yAxisRight = d3.axisRight().scale(yScale).tickSize(0).tickFormat('')
However, both require that we define the tickSize function to 0 to avoid the default ticks at the start and the end of the axis.
This is working snippet:
const element = document.getElementById('plot')
const margin = {
top: 20,
right: 20,
bottom: 30,
left: 50,
}
const width = 600, height = 180
const data = [10, 15, 20, 25, 30]
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height)
.attr('viewBox', [0, 0, width, height])
.attr('style', 'max-width: 100%; height: auto; height: intrinsic;')
const xScale = d3.scaleLinear()
.domain([d3.min(data), d3.max(data)])
.range([margin.left, width - margin.right])
const yScale = d3.scaleLinear()
.domain([d3.min(data), d3.max(data)])
.range([height - margin.bottom, margin.top])
const xAxis = d3.axisBottom().scale(xScale)
const xAxisTop = d3.axisTop().scale(xScale).tickSize(0).tickValues([])
const yAxis = d3.axisLeft().scale(yScale)
const yAxisRight = d3.axisRight().scale(yScale).tickSize(0).tickFormat('')
svg.append('g')
.attr('transform', `translate(${margin.left},0)`)
.call(yAxis)
svg.append('g')
.attr('transform', `translate(${width - margin.right}, 0)`)
.call(yAxisRight)
svg.append('g')
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(xAxis)
svg.append('g')
.attr('transform', `translate(0, ${margin.top})`)
.call(xAxisTop)
element.appendChild(svg.node())
.center {
display: flex;
justify-content: center;
align-items: center;
width: 98vw;
height: 190px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id='plot' class='center'></div>