Ticks on Axis not appearing

Question

I want to make a line chart that is shown in this link(https://www.d3-graph-gallery.com/graph/line_basic.html). I have LITERALLY copy pasted the code from the link and i am not getting ticks on the axis. I am using React.js. The picture below is the image i get. What am i doing wrong? I have tried pretty much everything and nothing seems to work

import React, {Component, useRef, useEffect} from 'react';
//import { Line } from 'react-chartjs-2';
import ExperienceScoresData from './experience_scores';
//import Helpbox from '../questionbox/helpbox';
//import "./linechart.css";
import * as d3 from "d3";
//import {withFauxDOM} from 'react-faux-dom';
//import ReactFauxDOM from 'react-faux-dom'
import Faux from "react-faux-dom"

import { select } from 'd3-selection'
import { createNoSubstitutionTemplateLiteral } from 'typescript';


ExperienceScoresData.map(function(val){
  val.customerExperienceScore *= 100;
  return 0;
})

class Linechart extends Component {
  constructor(props){
    super(props)
    this.createBarChart = this.createBarChart.bind(this)
  }

  
  componentDidMount() {
    this.createBarChart()
  }

  componentDidUpdate() {
    this.createBarChart()
  }

  createBarChart() {

var margin = {top: 10, right: 30, bottom: 100, left: 60},
width = 970 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var node = this.node
var svgObj = select(node)
              .attr("width", width + margin.left + margin.right)
              .attr("height", height + margin.top + margin.bottom)
              .append("g")
              .attr("transform","translate(" + margin.left + "," + margin.top + ")");

d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/3_TwoNumOrdered_comma.csv",
    
    // When reading the csv, I must format variables:
    function(d){
      return { date : d3.timeParse("%Y-%m-%d")(d.date), value : d.value }  
    },
        
    // Now I can use this dataset:
    function(data) {
      //console.log(data)

      // Add X axis --> it is a date format
      var x = d3.scaleTime()
        .domain(d3.extent(data, function(d) { return d.date }))
        .range([ 0, width ]);
        //console.log(x)
      svgObj.append("g")
        .attr("transform", "translate(100," + height + ")")
        .call(d3.axisBottom(x));

      // Add Y axis
      var y = d3.scaleLinear()
        .domain([0, d3.max(data, function(d) { return +d.value; })])
        .range([ height, 0 ]);
      svgObj.append("g")
        .call(d3.axisLeft(y));

        svgObj.append("path")
        .datum(data)
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-width", 1.5)
        .attr("d", d3.line()
          .x(function(d) { return x(d.date) })
          .y(function(d) { return y(d.value) })
          )
    }
  )
  }

    render() {
      return <svg ref={node => this.node = node}>
      </svg>
   }
}

export default Linechart;

Answer 1

Nevermind. The problem was with the package. I previously did 'npm i install', but when i did 'npm install d3', and i ran it, than it worked.