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

下一步而不是这样做：

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

鼠标悬停d3上的工具提示

1 个答案: