造型 d3 的工具提示 [英] Styling d3´s tooltip

问题描述

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

I implement a tooltip over circles placed through d3 on a leafletmap like this:

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()
      //...

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

I wonder how I can style the tooltip that shows up? Is there a way to give it a background, write something in bold, italic, different colors etc?

推荐答案

这是我喜欢做的.首先，我为工具提示设置 CSS 样式，使用一个 div 和一个名为工具提示"的类:

This is what I like to do. First, I set the CSS style for the tooltip, using a div with a class named "tooltip":

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

然后我设置了一个工具提示变量(这里，svgId 是您附加 SVG 的元素的 ID，与您选择body"没有太大区别):

Then I set a tooltip var (here, svgId is the ID of the element where you append your SVG, not much different of selecting "body" as you did):

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

div 具有 0 不透明度.然后只需在 mouseover 或 mousemove 上显示工具提示:

The div has 0 opacity. Then it's just a matter of showing the tooltip on mouseover or 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 标签为工具提示内的文本设置样式，使其变为粗体、斜体等.最后，我们使工具提示在鼠标移开时消失(正如您所做的那样):

You can use HTML tags to style your text inside the tooltip, making it bold, italic etc. And, finally, we make the tooltip disappear on mouseout (as you did):

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

由于具有 0 不透明度的 div 仍然占用页面空间，更好的方法是将其 display 属性从 none 更改为 mouseover 期间 >block，在 mouse out 时回到 none.

Since the div with 0 opacity still takes space in the page, a better approach is changing its display property from none to block during the mouseover, and back to none in the mouse out.

这篇关于造型 d3 的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！