Accepted answer

There is no missing tick, all those inner ticks are there! However, they are going to the right hand side of the chart, because you did this:


In other words, your light grey gridlines are your ticks.

If you want to keep those light grey gridlines and draw the regular ticks, you have to do a different approach. Like this:

    .attr("x2", width)
    .style("stroke", "#eee")

Here is your code with that change:

var margin = { top: 70, right: 30, bottom: 50, left: 40 }
var width = 720 - margin.left - margin.right
var height = 430 - - margin.bottom

var data = [

var svg ='body').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + + margin.bottom)
    .attr('transform', `translate(${margin.left}, ${})`)

var x = d3.scaleLinear()
    .range([0, width])
    .domain([data[0].x , data[data.length - 1].x])

var y = d3.scaleLinear()
    .range([height, 0])
    .domain([-30, 120])

var xAxis = d3.axisBottom()
    .tickFormat(d => d +'s')

var yAxis = d3.axisLeft()

var line = d3.line()
    .x(function (d) {
        return x(d.x);
    .y(function (d) {
        return y(d.angle);

    .attr('d', line(data))
    .attr('stroke', '#ff5722')
    .attr('stroke-width', '2')
    .attr('fill', 'none');

    .attr('transform', `translate(0, ${height})`)

    .attr("x2", width)
    .style("stroke", "#eee")
.tick text{
    font-size: 12px;
<script src=""></script>

Related Query

More Query from same tag