Project Bar Chart: mouseover argument

So I am trying to do the first project of the data visualisation courses and I managed to render my bar chart.

I tried to create a tooltip so that I can see the data when my mouse is on top of one of the bars and I pass the data into a function.

I thought I was going to use d[0] for the date and d[1] for GDP, but it keeps showing undefined.

I accidentally change the d to i, now it can show the data I wanted.

Now I am confused: d and i under the element “rect” should be the data and the corresponding index, but when the method is on(), it seems not working the way they supposed to? What am I doing wrong? Thank you for the help!
Here is my codepen link:

const req = new XMLHttpRequest();"GET", '');
req.onload = function() {
  const json = JSON.parse(req.responseText);

function createTable(data) {
  const year = => d[0].split("-")[0]);
  const h = 1000;
  const w = 1200;
  const padding = 100;
  const xScale = d3.scaleLinear()
                   .domain([d3.min(year, d => d), d3.max(year, d => d)])
                   .range([padding, w - padding])
  const yScale = d3.scaleLinear()
                   .domain([0, d3.max(data, d=> d[1])])
                   .range ([h - padding, padding])
  const tooltip ="body")
                    .attr("class", "tooltip")
                    .attr("id", "tooltip")
  const svg ="#table")
                .attr("width", w)
                .attr("height", h);
     .attr("class", "bar")
     .attr("x", (d, i) => xScale(1947 + i / 4))
     .attr("y", (d, i) => yScale(d[1]))
     .attr("width", 1)
     .attr("height", (d, i) => h - yScale(d[1])- padding)
     .attr("data-date", (d, i) => d[0])
     .attr("data-gdp", (d, i) => d[1])
     .on("mouseover", (d, i) => {tooltip.html(`Date: ${i[0]}
                                              GDP: ${i[1]}`)
                                       .attr("data-date", i[0])
                                       .attr("data-gdp", i[1])})
     .on("mouseout", (d, i) => tooltip.html("")
                                      .attr("data-date", "")
                                      .attr("data-gdp", "")
  const yAxis = d3.axisLeft(yScale);
  const xAxis = d3.axisBottom(xScale);
     .attr("transform", `translate(${padding} ,0)`)
     .attr("id", "y-axis")
     .attr("transform", `translate(0, ${h - padding})`)
     .attr("id", "x-axis")