Javascript 鼠标悬停在d3上的工具提示

在callback函数中，我有以下内容：

/...
feature.on("mouseover",function(d) { 
    d3.select(this)
    .transition()
    .ease("cubic")
    .duration(10)
    .attr('r', function (d){ 
     return (d.x);
    })
        .tooltip.style("visibility", "visible");
      });

我的

工具提示的定义如下：

var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

但是，工具提示不会弹出。你知道为什么吗？
如何将工具提示附加到
mouseoverevent
？以及：我将如何更改其中的文本（假设我希望使用
函数（d）{..
）访问数据中的文本）

从
中提取的代码首先为工具提示提供一个ID或类，以便进行如下选择：

var tooltip = d3.select("body")
    .append("div")
    .attr("id", "mytooltip")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

下一步，不要这样做：

feature.on("mouseover",function(d) { 
    d3.select(this)
    .transition()
    .ease("cubic")
    .duration(10)
    .attr('r', function (d){ 
     return (d.x);
    })

        .tooltip.style("visibility", "visible");//this is wrong
      });

执行此操作可在鼠标悬停时显示工具提示：

feature.on("mouseover",function(d) { 
    d3.select(this)
    .transition()
    .ease("cubic")
    .duration(10)
    .attr('r', function (d){ 
     return (d.x);
    });
    //show tooltip on hover
    d3.select("#mytooltip")
    .style("visibility", "visible")//set style to it
    .text("new tooltip")//set text to it
   });

此外，添加此选项可使工具提示显示在鼠标旁边（如图所示）！否则工具提示可能会显示在您的站点上您无法看到的某个位置

feature.on("mousemove", function() { 
    return tooltip.style("top", (d3.event.pageY-10)+"px") 
    .style("left",(d3.event.pageX+10)+"px"); 
    });

使用。它将根据您节点上的数据工作。并且它具有类似show and hide的功能，您可以在mouseover和mouseout.Hm上使用。这不起作用。我是否必须在回调中定义
var tooltip..
？否，我正在使用tooltip
d3的id进行选择。选择（“mytooltip”）
确保工具提示在鼠标悬停回叫之前就已经制作好了，但是它在鼠标悬停所在的回叫之外。结构是
回叫函数->做点什么->鼠标悬停函数
。我需要
var tooltip=d3.选择（“body”）
change可以做一些不同的事情吗？我的鼠标悬停在地图上的是圆圈。我试图用
circle
替换
body
，但这并没有解决问题。如果你在控制台上出现任何错误……或者如果你能做一把小提琴，那就最好了。不，控制台中没有错误。
mouseover
仍然适用于所有人显示效果，但不显示工具提示。