JSFiddle - React, Tailwind, and code Playground

HTML

<div class="primaryTimeline default_floatL">
    <div id="primaryTimelineBackground" class="default_floatL"><div>
</div>

CSS

.primaryTimeline{
	height:310px;
	width:900px;
	 z-index: -100;
}

#primaryTimelineBackground{	
	position:absolute;
	top:180px;
	height:100px;
	width:900px;
}
.xAxisBackground{
	width:900px;
}

.primaryTimelineSvg{
	position:absolute;
	left:23px;
}

.primaryXAxis path {
    display: none;
}
.primaryXAxis path.domain { 
  fill: none; 
  stroke: gray; 
  stroke-width: 33; 
   z-index: -100;
}

rect.pane {
 /* cursor: move;*/
  fill: none;
  pointer-events: all;
}

JavaScript

var width = 900,
            padding = 30;
                     
            var yScale = d3.scale.linear()
                        .domain([0,0 ])   
                        .range([0, 0]);   
                    
                        
            var xScale = d3.scale.linear()
                        .domain([-2000000000,2000000000])        
                        .range([(padding/2), width - padding * 2]); 
                        
               // console.log('hi');
                    
            var yAxis = d3.svg.axis()
                        .orient("left")
                        .scale(yScale);
                    
                    // define the y axis
           var xAxis = d3.svg.axis()
                        .orient("bottom")
                        .scale(xScale)
                        .ticks(5)
                        .tickSubdivide(10)
                        .tickSize(-60,-60,60)
                       .tickFormat(function (d) { return toYear(d);});

var containerSvg =  d3.select("#primaryTimelineBackground").append("svg")
                            .attr("class","primaryTimelineSvg")
                            .attr("width", "850px")
                            .attr("height","100px");
           
           containerSvg.selectAll("line.x")
                          .data(xScale.ticks(50))
                          .enter().append("line")
                          .attr("class", "xMinor")
                          .attr("x1", xScale)
                          .attr("x2", xScale)
                          .attr("y1", -45)
                          .attr("y2", 45)
                          .style("stroke", "#808080");

                        containerSvg.selectAll("line.x")
                          .data(xScale.ticks(5))
                          .enter().append("line")
                          .attr("class", "x")
                          .attr("x1", xScale)
                          .attr("x2", xScale)
                         ...