JSFiddle - React, Tailwind, and code Playground

CSS

.axis path, .axis line {
        fill: none;
        stroke: #333;
        /*stroke: red;*/
    }

    .axis .grid-line {
        stroke: #000;
        shape-rendering: crispedges;
        stroke-opacity: 0.2;
    }

    .vert-line{
        stroke-width: 1;
/*stroke-dasharray: 1%;*/
    }

    .vert-lineM{
        stroke: #ff4e37;
        stop-opacity: 0.2;
    }

    .axis text {
        font: 10px Verdana;
    }

JavaScript

//var x = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
     var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


    var height = 500,
        width = 800,
        margin = 30;

    var formatTime = d3.timeParse("%H:%M");

    var svg = d3.select("body").append("svg")
        .attr("class", "axis")
        .attr("width", width)
        .attr("height", height);

		var data1 = new Date;
    var data2 = new Date;
    
    //data2 = data2.setDate(this_s.getDate() + 1);
//alert(data1)
/*
    
    
   
    
    alert(data1);
    alert(data2);
*/ 
    var xAxisLength = width - margin * 2,
        yAxisLength = height - margin * 2;

    console.log(parseTime("08:00"))

    var scaleX = d3.scaleTime().domain([parseTime("08:00"), parseTime("14:00")]).range([0, xAxisLength]);
    var scaleY = d3.scalePoint().domain(x).range([0, yAxisLength]);
    // var scaleXM = d3.scaleTime().range([0, xAxisLength]);

    var xAxis = d3.axisBottom(scaleX).ticks(12).tickFormat(d3.timeFormat("%H:%M"));
    var yAxis = d3.axisLeft(scaleY).ticks(x.length);

    // var xAxisHidden = d3.axisBottom(scaleXM).ticks(72);
    // console.log(xAxisHidden)

    svg.append('g').attr("class", "axis-top").attr("transform",  // сдвиг оси верх и вправо
        "translate(" + margin + "," + margin + ")").call(d3.axisTop(scaleX).ticks(12).tickFormat(d3.timeFormat("%H:%M")));


    svg.append('g').attr("class", "x-axis axis-bottom").attr("transform",  // сдвиг оси вниз и вправо
        "translate(" + margin + "," + (height - margin) + ")").call(xAxis);
    svg.append('g').attr("class", "y-axis").attr("transform",  // сдвиг оси вниз и вправо
        "translate(" + margin + "," + margin + ")").call(yAxis);


    // svg.append('g').attr("class", "x-axisXM axis-bottom").attr("transform",  // сдвиг оси вниз и вправо
    //     "translate(" + margin + "," + (height - margin) + ")").call(xAxisHidden);




    //создаем набор вертикальных линий
    d3.selectAll("g.x-axis g.tick")
        .append("line")
       ...