The data-yvalue and its corresponding dot should align with the corresponding point/value on the y-axis

1

I have a problem with Data Visualization Projects - Visualize Data with a Scatterplot Graph
everything working fine except this one role number 8 this is my code for this part

yScale & xScale

function Time(time)
{
  time = time.split(':');

  let date = new Date();
    date.setMinutes(time[0])
    date.setSeconds(time[1])

  return date.getTime();
}

const timeFormat = d3.timeFormat("%M:%S");

const xScale = d3.scaleLinear()
    .domain([d3.min(res, d => d.Year), d3.max(res, d => d.Year)])    
    .range([padding, width - padding])

const yScale = d3.scaleTime()
    .domain([d3.min(res, d => Time(d.Time)), d3.max(res, d => Time(d.Time))])
    .range([padding, height - padding]);

const xAxis = d3.axisBottom(xScale).tickFormat(d3.format('d'));
const yAxis = d3.axisRight(yScale).tickFormat(timeFormat);

Circle

svg.selectAll('circle')
  .data(res)
  .enter()
  .append('circle')
  .attr('class', 'dot')
  .attr('r', 7)
  .attr('cx', (d) => xScale(d.Year))
  .attr('cy', (d) => yScale(Time(d.Time)))
  .attr('data-xvalue', d => d.Year)
  .attr('data-yvalue', d => (new Date(Time(d.Time))).toISOString())
2

I fix it the problem is in this part of code in yAxis

svg.append('g')
  .style("transform", "translate(5px, -10px)")
  .attr('id', 'y-axis')
  .call(yAxis)

I edit it it to this one it worked correctlly

svg.append('g')
  .style("transform", "translate(0, 0)")
  .attr('id', 'y-axis')
  .call(yAxis)