设置 d3 的工具提示样式

Styling d3´s tooltip

本文关键字：样式 工具提示 d3 设置      更新时间：2023-09-26

我在传单图上通过 d3 放置的圆圈上实现了一个工具提示，如下所示：

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("elastic")
    .duration(500)
    .attr('r', function (d){ 
        return (d.properties.xy * 5)
        .style("stroke", "black")
        d3.select("#mytooltip")
            .style("visibility", "visible")
            .text(d.properties.xy1 + " " + d.properties.xy2)
    });
feature.on("mousemove", function() {
    return tooltip.style("top", (d3.event.pageY-10)+"px")
    .style("left",(d3.event.pageX+10)+"px");
    });
feature.on("mouseout",function(d) { 
    d3.select(this)
    .transition()
    .ease("elastic")
    .duration(500)
    .attr('r', function (d){ 
            return (d.properties.xy);
        })
        .style("stroke", "none")
        d3.select("#mytooltip")
            .style("visibility", "hidden")
    });

我的功能是这样的：

var feature = g.selectAll("circle")
      .data(myData.features)
      .enter()
      //...

我想知道如何设置显示的工具提示的样式？有没有办法给它一个背景，用粗体、斜体、不同的颜色等写一些东西？

这就是我喜欢做的事情。首先，我设置工具提示的 CSS 样式，使用带有名为"tooltip"的类的div：

div.tooltip {   
    position: absolute;         
    etc...          
}

然后我设置了一个工具提示 var（在这里，svgId是你附加 SVG 的元素的 ID，与选择"body"没有太大区别）：

var tooltip = d3.select("#svgId").append("div") 
    .attr("class", "tooltip")               
    .style("opacity", 0);

div 具有0不透明度。然后只需在mouseover或mousemove上显示工具提示即可：

selection.on("mousemove", function(d) {
    tooltip.html("<strong> Look, I'm bold !</strong> and now I'm not bold<br>
        and this is another line!and this is my data: " + d.whatever)
        .style('top', d3.event.pageY - 12 + 'px')
        .style('left', d3.event.pageX + 25 + 'px')
        .style("opacity", 1);
});

您可以使用 HTML 标记在工具提示内设置文本样式，使其加粗、斜体等。最后，我们使工具提示在鼠标退出时消失（就像您所做的那样）：

selection.on("mouseout", function(d) {
    tooltip.style("opacity", 0);
});

由于不透明度0div仍然占用页面空间，因此更好的方法是在mouseover期间将其display属性从none更改为block，然后在mouse out中更改回none。

您可以使用

CSS 设置工具提示的样式。 您可以在单独的 .css 文件、<style> 标记中或使用 d3 执行此操作，方法与提供工具提示可见性的方式相同。 类似.style("background", "rgba(179, 107, 0, 0.5)")

相关文章：