How to show selected tick labels in d3.js?

@daisha 

To show only selected tick labels in d3.js, you can use the .text() function to set the text content of each tick label based on some condition. Here's an example code snippet that demonstrates how to show labels for only selected ticks:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// Set up the tick values and labels
var tickValues = [1, 2, 3, 4, 5];
var tickLabels = ["One", "Two", "Three", "Four", "Five"];

// Select the axis element and create an axis scale
var axis = d3.select("svg")
  .append("g")
  .attr("transform", "translate(50,50)");

var scale = d3.scaleLinear()
  .domain([1, 5])
  .range([0, 200]);

// Create the axis
var xAxis = d3.axisBottom(scale)
  .tickValues(tickValues)
  .tickFormat(function(d, i) {
    // Only show the label for selected tick values
    if (tickValues.includes(d)) {
      return tickLabels[i];
    }
    return "";
  });

// Render the axis
axis.call(xAxis);

In this example, we define the tick values and corresponding labels in separate arrays (tickValues and tickLabels). When creating the x-axis, we use the tickFormat() function to determine the text content of each tick label. In this function, we check if the current tick value is present in the tickValues array. If it is, we return the corresponding label from the tickLabels array; otherwise, we return an empty string. This effectively shows only the selected tick labels.