d3js：通过鼠标悬停显示路径名

Question

我的目标是在地图上方悬停鼠标时显示国家/地区地图上相应地区的名称。为了生成我的地图，我加载了一个带有d3js的json文件。一切都很好（我的地图显示了不同的区域），唯一的问题是，当鼠标悬停在这个给定区域时，我不会只显示给定区域的名称。我认为与.select（this）有关，但我不知道如何将它放在下面的代码中。有什么想法吗？

（我也知道我可以设置一个html工具提示，但我现在更愿意在SVG中进行设置）

var areas = svg.append("path")
    .attr("d", path)
    .attr("class", "area")
    .attr("fill", "steelblue")
    .attr("stroke", "white")
    .attr("stroke-width", ".5")
    .on("mouseover", function() { d3.select("text").style("visibility", "visible"); })
    .on("mouseout", function() { d3.select("text").style("visibility", "hidden"); });

  var text = svg.append("text")
    .attr("x", function (d) { return path.centroid(d)[0]; })
    .attr("y", function (d) { return path.centroid(d)[1]; })
    .attr("text-anchor", "middle")
    .style("fill", "gray")
    .style("visibility", "hidden")
    .text(function (d) { return d.properties.name; });