javascript - 鼠标悬停 d3 上的工具提示

Question

在回调函数中我有这个:

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

我的 tooltip 定义如下:

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

但是，工具提示不会弹出。任何想法为什么？如何将工具提示附加到 mouseoverevent？并且:我将如何更改其中的文本(假设我想从我的数据中获取文本，我可以使用 function(d) {....)

从 here 中提取的代码

Answer 1

首先为您的工具提示提供一个 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");

Next 而不是这样做:

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
   });

此外，将此添加到工具提示以显示在鼠标旁边(如图 here 所示)!否则工具提示可能会显示在您网站上您看不到的地方!

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