D3JS: запуск событий не работает

Question

Я составил этот список стран и хочу, чтобы соответствующий круг имел некоторую интерактивность, но функции, объявленные для mouseover и mouseout, не работают.Кажется, все в порядке, и я не могу найти проблему.Можете ли вы помочь мне выяснить, что происходит?

вот мой код

        var mapData = [

{"code":"AU" , "name":"Australia", "value":3, "color":"#BC204B"},	
{"code":"BE" , "name":"Belgium", "value":1, "color":"#BC204B"},	
{"code":"BR" , "name":"Brazil", "value":1, "color":"#BC204B"},
{"code":"CA" , "name":"Canada", "value":4, "color":"#BC204B"},
{"code":"FI" , "name":"Finland", "value":1, "color":"#BC204B"},
{"code":"FR" , "name":"France", "value":1, "color":"#BC204B"},	
{"code":"DE" , "name":"Germany", "value":1, "color":"#BC204B"},
{"code":"IS" , "name":"Iceland", "value":1, "color":"#BC204B"},
{"code":"IN" , "name":"India", "value":2, "color":"#BC204B"},
{"code":"IE" , "name":"Ireland", "value":1, "color":"#BC204B"},
{"code":"JP" , "name":"Japan", "value":2, "color":"#BC204B"},
{"code":"KP" , "name":"Korea, Dem. Rep.", "value":1, "color":"#BC204B"},
{"code":"LU" , "name":"Luxembourg", "value":1, "color":"#BC204B"},
{"code":"NL" , "name":"Netherlands", "value":3, "color":"#BC204B"},
{"code":"NZ" , "name":"New Zealand", "value":2, "color":"#BC204B"},
{"code":"NO" , "name":"Norway", "value":2, "color":"#BC204B"},
{"code":"PY" , "name":"Paraguay", "value":1, "color":"#BC204B"},
{"code":"SA" , "name":"Saudi Arabia", "value":2, "color":"#BC204B"},
{"code":"SG" , "name":"Singapore", "value":1, "color":"#BC204B"},
{"code":"ES" , "name":"Spain", "value":1, "color":"#BC204B"},
{"code":"CH" , "name":"Switzerland", "value":2, "color":"#BC204B"},
{"code":"AE" , "name":"United Arab Emirates", "value":2, "color":"#BC204B"},
{"code":"GB" , "name":"United Kingdom", "value":2, "color":"#BC204B"},
{"code":"US" , "name":"United States", "value":4, "color":"#BC204B"}
];
        var width = "512"
        var height = "400"
        var radius = 5

        var svg = d3.select("body")
            .append("svg")
            .attr("width",width)
            .attr("height",height)
            .style("background","#dedede")
            .append("g")
            .attr("transform", function (d, i) {
                      return "translate(" + width/20 + "," + (height -170)  + ")";
                  });

            var g = svg.selectAll("g")
                  .data(mapData)
                  .enter()
                  .append("g")
                  .attr("transform", function (d, i) {
                      return "translate(" + i * 20 + "," + 0+ ")";
                  });

            var circles = g.append("circle")
                .attr("cx",0)
                .attr("cy",0)
                .attr("r",radius)
                .attr("fill","#00A3A1")
                .on("mouseover", handleMouseOver)
                .on("mouseout", handleMouseOut);

            var labels = g.append("text")
                    .attr("class","countriesText")
                    .style("fill", "black")   
                    .attr("x", 0)           
                    .attr("y", 0)           
                    .attr("dy", ".35em")           
                    .attr("text-anchor", "start") 
                    .text(function(d,i){
                        return mapData[i].name;
                })
                .attr("transform", "translate(0,20) scale(1) rotate(90)")

            function handleMouseOver(d, i) { 
                d3.select(this).attr({
              fill: "orange",
              r: radius * 2
            });

            };

            function handleMouseOut(d, i) {
           
            d3.select(this).attr({
              fill: "#00a3a1",
              r: radius
            })
        };
                                
               

    *{
            font-family: arial
            -webkit-font-smoothing: antialiased;
        }
        .countriesText{
            font-family: arial;
            text-rendering: optimizeLegibility;
            

        }

спасибо