score:8

Accepted answer

There are two ways of doing what you want. The first one is using tickFormat.

So, suppose you have this crowded axis:

var svg = d3.select("svg");
var data = d3.range(30).map(function(d) {
  return "tick" + d
});
var scale = d3.scalePoint()
  .domain(data)
  .range([20, 480]);
var axis = d3.axisBottom(scale);
var gX = svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis);
path, line {
  shape-rendering: crispEdges;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="100"></svg>

You can use tickFormat to show only one of every 4 ticks:

var svg = d3.select("svg");
var data = d3.range(30).map(function(d) {
  return "tick" + d
});
var scale = d3.scalePoint()
  .domain(data)
  .range([20, 480]);
var axis = d3.axisBottom(scale)
  .tickFormat(function(d, i) {
    return i % 3 === 0 ? d : null;
  });
var gX = svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis);
path, line {
  shape-rendering: crispEdges;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="100"></svg>

However, this solution removes only the text, leaving the tick. If you want to remove the tick as well, you can create a new selection and use each:

var svg = d3.select("svg");
var data = d3.range(30).map(function(d) {
  return "tick" + d
});
var scale = d3.scalePoint()
  .domain(data)
  .range([20, 480]);
var axis = d3.axisBottom(scale);
var gX = svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis);
d3.selectAll(".tick").each(function(d, i) {
  if (i % 3 != 0) {
    d3.select(this).remove()
  }
})
path,
line {
  shape-rendering: crispEdges;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="500" height="100"></svg>


Related Query

More Query from same tag