d3 js tooltip on hover treenode not rendering

Question

这里是我在鼠标悬停在树节点上时显示工具提示的代码。

function mouseover(d) { 
       d3.select(this).append("div") 
        .attr("class","tooltip") 
        .attr('transform', function(d){ 
         return 'translate(5, -10)'; 
        }) 
        .text(d.name); 
      } 

，这里是我的工具提示本身

.tooltip { 
      display: inline; 
      position: relative; 
     } 

     .tooltip:hover { 
      color: #c00; 
      text-decoration: none; 
     } 

     .tooltip:hover:after { 
      background: #111; 
      background: rgba(0,0,0,.8); 
      border-radius: .5em; 
      bottom: 1.35em; 
      color: #fff; 
      content: attr(title); 
      display: block; 
      left: 1em; 
      padding: .3em 1em; 
      position: absolute; 
      text-shadow: 0 1px 0 #000; 
      white-space: nowrap; 
      z-index: 98; 
     } 

     .tooltip:hover:before { 
      border: solid; 
      border-color: #111 transparent; 
      border-color: rgba(0,0,0,.8) transparent; 
      border-width: .4em .4em 0 .4em; 
      bottom: 1em; 
      content: ""; 
      display: block; 
      left: 2em; 
      position: absolute; 
      z-index: 99; 
     } 

CSS我不能看到提示，当我将鼠标放在节点。我对d3相当陌生。

问题是什么？

Answer 1

我创建演示给你

var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr('height', '300px') 
 
    .attr('width', '300px') 
 

 
var bg = svg.append("g") 
 
    .append('rect') 
 
    .attr('height', '300px') 
 
    .attr('width', '300px') 
 
    .attr('fill', '#F00'); 
 

 
var tooltip = svg.append("g") 
 
\t .append('rect') 
 
    .attr('height', '50px') 
 
    .attr('width', '50px') 
 
    .attr('fill', '#0F0'); 
 
    
 
bg.on('mousemove', function() { 
 
var x = d3.mouse(this)[0] - 25; 
 
var y = d3.mouse(this)[1] - 70 
 
    tooltip 
 
     .attr("transform", "translate(" + x + "," + y + ")") 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>