D3js Get the name of the data when it hovers

Question

I'm working on an interactive graph project in django using d3js.

I'm trying to create a scatter graph in d3js that displays a tooltip when the cursor hovers over a data node.

However, I don't know how to get the name that corresponds to the pre-defined data when the cursor hovers over it.

The scatter data I'm using is
x : scatter x-coordinate
y : scatter y-coordinate
name : a unique name for the data

I want to get the value of this name key during this hover.

How can I reference the value of the original data corresponding to the data node with the key etc.?

Thank you.

My code is as follows.

<div id="dc-graph"></div>

            // data from python (django)
            var graph_data = JSON.parse('{{ graph|safe }}'); 
            var num = graph_data.num;
            var width = graph_data.width;
            var height = graph_data.height;
            var margin = graph_data.margin;
            var svgWidth = width + margin.left + margin.right;
            var svgHeight = height + margin.top + margin.bottom;
            var data = [];
            for (let i = 0; i < num; i++){
                const adata = {x: graph_data.x[i], y: graph_data.y[i], name: graph_data.name[i]};
                data.push(adata);
            }

            // svg
            var svg = d3.select("#dc-graph")
                .append("svg")
                .attr("class", "dc-graph-svg")
                .attr('width', svgWidth)
                .attr('height', svgHeight);

            // tooptip
            var tooltip = d3.select("#dc-graph")
                .append("div")
                .attr("id", "dc-tooltip")

            // axis
            var xScale = d3.scaleLinear()
                .domain([0, d3.max(data, function(d){return d.x;})])
                .range([0, width]);

            var yScale = d3.scaleLinear()
                .domain([0, d3.max(data, function(d){return d.y;})])
                .range([height, 0]);

            var axisx = d3.axisBottom(xScale);
            var axisy = d3.axisLeft(yScale);
            svg.append("g")
                .attr("class", "x_axis")
                .attr("transform", "translate(" + margin.left + "," + (height + margin.top) + ")")
                .call(axisx);

            svg.append("g")
                .attr("class", "y_axis")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                .call(axisy);

            // plot
            svg.append("g")
                .selectAll("circle")
                .attr("class", "sc-scatter")
                .data(data)
                .enter()
                .append("circle")
                .attr("cx", function(d) {
                    console.log(d.x);
                    return xScale(d.x);
                })
                .attr("cy", function(d) {
                    console.log(d.y);
                    return yScale(d.y);
                })
                .attr("fill", "SkyBlue")
                .attr("r", 4)
                .on("mouseover", function(d) {
                    tooltip
                        .style("visibility", "visible")
                        .html("name : " + d.name + "<br>x: " + d.x + "y: " + d.y);
                })
                .on("mousemove", function(evnet, d) {
                    const[x, y] = d3.pointer(evnet);
                    tooltip
                        .style("top", (y - 20) + "px")
                        .style("left", (x + 10) + "px");
                })
                .on("mouseout", function(d) {
                    tooltip.style("visibility", "hidden");
                });