[Solved]-How can I customize the label of X axis, that means the label in X axis is different from the data-d3.js

Add the following function:

const getRange = d => {
    const index = ageDomain.findIndex(item => item === d);
    if(index === 0)
        return `0 -- ${d}`;
    else
        return `${ageDomain[index-1] + 1} -- ${d}`;
}

Then, when creating the bottom axis, add the following line

.text(d => getRange(d))

after

.selectAll("text") :

svg.append("g")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(xScale))
   .selectAll("text")
   .text(d => getRange(d))
   .attr("transform", "translate(-10,0)rotate(-45")
   .style("text-anchor", "end");