造型d3's提示

Question

我實現了通過D3上leafletmap放置這樣在圈子裏提示：

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

我不知道如何可以將樣式顯示的工具提示？有沒有辦法給它一個背景，寫一些粗體，斜體，不同顏色的東西？

Answer 1

這就是我喜歡做的事情。首先，我設置的CSS樣式的提示，使用一個div名爲「工具提示」類：

div.tooltip { 
     position: /*whatever*/;   
     text-align: /*whatever*/;   
     white-space: /*whatever*/;     
     padding: /*whatever*/;    
     font-size: /*whatever*/;   
     background: /*whatever*/; 
     border: /*whatever*/; 
     border-radius: /*whatever*/;    
     pointer-events: /*whatever*/; 
     etc...   
    } 

然後，我設置了工具提示VAR（這裏，#svgId是你追加元素的Id你與你一樣選擇「身體」沒有多大區別）：

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

該div有0不透明度。然後，這只是在mouseover或mousemove上顯示工具提示的問題。我喜歡鼠標移動：

feature.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標籤樣式的工具提示中的文字，使它粗體，斜體等。最後，我們讓鼠標移開時的提示消失（像你一樣）：

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

Answer 2

您可以使用CSS設計工具提示。您可以在單獨的.css文件中，在<style>標記中或使用d3以與提供工具提示可見性相同的方式執行此操作。類似於.style("background", "rgba(179, 107, 0, 0.5)")