D3js 工具提示无法在 choropleth 上显示

Question

我想用工具栏创建地图。当鼠标悬停在国家上时，工具提示应该会出现。在鼠标移开时，工具提示应该消失。我尝试了以下方法：但永远无法获得工具提示。

我是 d3js 的新手，如果有人能让我知道我在这里做错了什么，我会非常感激。

svg.append('g')
                .selectAll('path')
                .data(world.features)
                .enter()
                .append('path')
                // for each country
                .attr('d', path)
                .attr('class', 'country')
                .style('fill', function(d){
                    if (d.properties.name in mapData){
                        return colorScale(mapData[d.properties.name][0]);
                    } else{
                        return 'grey'
                    }
                });


            var tooltip = svg.append("g");

            // Create and customize tooltip
            svg.selectAll(".country")
                .on("mouseover", function(d) {
                    tooltip.call(
                        callout, function(d){
                            if (d.properties.name in mapData){
                                return "Country: " + d.properties.name + 
                                        "/\n/" +
                                        "Game: " + selectedGame +
                                        "/\n/" +
                                        "Avg Rating: " + format(mapData[d.properties.name][0]) +
                                        "/\n/" +
                                        "Number of Users: " + format(mapData[d.properties.name][1])
                            } else{
                                return "Country: " + d.properties.name + 
                                        "/\n/" +
                                        "Game: " + selectedGame +
                                        "/\n/" +
                                        "Avg Rating: N/A " 
                                        "/\n/" +
                                        "Number of Users: N/A"
                            }
                        }                       
                    );
                    d3.select(this)
                        .attr("stroke", "red")
                        .raise();
                })
                .on("mouseleave", function() {
                    tooltip.call(callout, null);
                    d3.select(this)
                        .attr("stroke", null)
                        .lower();
                });