score:1

Accepted answer

In D3, the axis generator uses the passed scale for positioning the ticks. Therefore, all you need to do is passing those values in your tiksArray to the same scale (in your case, x).

Here is a very basic demo:

const ticksArray = [1900, 1950, 2000, 2010];
const svg = d3.select("svg")
const x = d3.scaleLinear()
  .domain([1880, 2020])
  .range([50, 450]);

svg.append("g")
  .attr("transform", `translate(0,${100})`)
  .call(d3.axisBottom(x)
    .tickValues(ticksArray)
    .tickSizeInner(-100)
  );

ticksArray.forEach(d => {
  console.log("The SVG position of the tick " + d + " is: " + x(d))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="200"></svg>


Related Query

More Query from same tag