Javascript 悬停饼图时不生成工具提示

我正在尝试使用d3构建一个饼图。我从网站上学到了这个概念，但是当我把鼠标悬停在饼图的一部分上时，工具提示并没有显示出来 下面是我使用的css样式代码

#chart {
    height: 360px;
    margin: 0 auto;                                               /* NEW */
    position: relative;
    width: 360px;
  }
  .tooltip {
    background: #eee;
    box-shadow: 0 0 5px #999999;
    color: #333;
    display: none;
    font-size: 12px;
    left: 130px;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 95px;
    width: 80px;
    z-index: 4;
  }
  .legend {
    font-size: 12px;
  }
  rect {
    cursor: pointer;                                              /* NEW */
    stroke-width: 2;
  }
  rect.disabled {                                                 /* NEW */
    fill: transparent !important;                                 /* NEW */
  }    

下面是js部分的代码

$rootScope.renderPieChart = function(dataset,dom_element_to_append_to){


        var width = $(dom_element_to_append_to).width(),
        height = 500,
        radius = Math.min(width, height) / 2;
        var donutWidth = 75;
        var legendRectSize = 18;                                  
        var legendSpacing = 4;


        var color = d3.scale.ordinal()
        .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

        var svg = d3.select(dom_element_to_append_to)
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        var arc = d3.svg.arc()
        .outerRadius(radius - 10)
        .innerRadius(radius - donutWidth);

        var pie = d3.layout.pie()
        .sort(null)
        .value(function(d) { return d.value; });

       var tooltip = d3.select(dom_element_to_append_to)
       .append('div')
       .attr('class', 'tooltip');
       console.log(tooltip);
       tooltip.append('div')
       .attr('class', 'label');

       tooltip.append('div')
       .attr('class', 'count');

       tooltip.append('div')
       .attr('class', 'percent');

       var path = svg.selectAll('path')
       .data(pie(dataset))
       .enter()
       .append('path')
       .attr('d', arc)
       .attr('fill', function(d, i) {
          return color(d.data.label + " " + d.data.value);
      });


       path.on('mouseover', function(d) {                            // NEW
        var total = d3.sum(dataset.map(function(d) {                // NEW
          return d.value;                                           // NEW
        }));             
        console.log("mouseover");                                           // NEW
        var percent = Math.round(1000 * d.data.value / total) / 10; // NEW
        tooltip.select('.label').html(d.data.label);                // NEW
        tooltip.select('.count').html(d.data.value);                // NEW
        tooltip.select('.percent').html(percent + '%');             // NEW
        tooltip.style('display', 'block');                          // NEW
      });   

        path.on('mouseout', function() {
        console.log("mouseout");                              // NEW
        tooltip.style('display', 'none');                           // NEW
      });  

       var legend = svg.selectAll('.legend')                    
       .data(color.domain())                                  
       .enter()                                              
       .append('g')                                           
       .attr('class', 'legend')                              
       .attr('transform', function(d, i) {                    
          var height = legendRectSize + legendSpacing;        
          var offset =  height * color.domain().length / 2;    
          var horz = -2 * legendRectSize;                     
          var vert = i * height - offset;                     
          return 'translate(' + horz + ',' + vert + ')';       
      });                                                    

       legend.append('rect')                                    
       .attr('width', legendRectSize)                         
       .attr('height', legendRectSize)                        
       .style('fill', color)                                  
       .style('stroke', color);                                

       legend.append('text')                                     
       .attr('x', legendRectSize + legendSpacing)              
       .attr('y', legendRectSize - legendSpacing)              
       .text(function(d) { return d; })
   };

它是一个函数，它接受整个饼图将要附加的dataset和dom元素 这是一个示例数据集

var dataset = [
      { label: 'Abulia', value: 10 },
      { label: 'Betelgeuse', value: 20 },
      { label: 'Cantaloupe', value: 30 },
      { label: 'Dijkstra', value: 40 }
    ];

我也尝试过不透明度：1，不透明度：0，但仍然没有结果。

---

提前感谢

现在它正在生成一个工作代码

  $rootScope.renderPieChart = function(dataset,dom_element_to_append_to){


        var width = $(dom_element_to_append_to).width(),
        height = $(window).height() - 120,
        radius = Math.min(width, height) / 2;
        var donutWidth = 75;
        var legendRectSize = 18;                                  
        var legendSpacing = 4;

        dataset.forEach(function(item){
            item.enabled = true;
        });

        /*var color = d3.scale.ordinal()
        .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
        */

        var color = $rootScope.defaultColorScheme;

        var svg = d3.select(dom_element_to_append_to)
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        var arc = d3.svg.arc()
        .outerRadius(radius - 10)
        .innerRadius(radius - donutWidth);

        var pie = d3.layout.pie()
        .sort(null)
        .value(function(d) { return d.value; });

        var tooltip = d3.select(dom_element_to_append_to)
        .append('div')
        .attr('class', 'tooltip');


        tooltip.append('div')
        .attr('class', 'label');

        tooltip.append('div')
        .attr('class', 'count');

        tooltip.append('div')
        .attr('class', 'percent');

        var path = svg.selectAll('path')
        .data(pie(dataset))
        .enter()
        .append('path')
        .attr('d', arc)
        .attr('fill', function(d, i) {
            return color(d.data.label );
        })
        .each(function(d) { this._current = d; }); 


        path.on('mouseover', function(d) {                            
            var total = d3.sum(dataset.map(function(d) {                
                return (d.enabled) ? d.value : 0;                                          
            }));             

            var percent = Math.round(1000 * d.data.value / total) / 10; 
            tooltip.select('.label').html(d.data.label.toUpperCase()).style('color','black');                
            tooltip.select('.count').html(d.data.value);                
            tooltip.select('.percent').html(percent + '%'); 
           /* //console.log(percent);
           //console.log(tooltip.select('.percent')); */           
           tooltip.style('display', 'block');
           tooltip.style('opacity',2);                          

       });  


        path.on('mousemove', function(d) {
            tooltip.style('top', (d3.event.layerY + 10) + 'px')
            .style('left', (d3.event.layerX - 25) + 'px');
        }); 

        path.on('mouseout', function() {                   
            tooltip.style('display', 'none');
            tooltip.style('opacity',0);                           
        });  



        var legend = svg.selectAll('.legend')                    
        .data(color.domain())                                  
        .enter()                                              
        .append('g')                                           
        .attr('class', 'legend')                              
        .attr('transform', function(d, i) {                    
            var height = legendRectSize + legendSpacing;        
            var offset =  height * color.domain().length / 2;    
            var horz = -2 * legendRectSize;                     
            var vert = i * height - offset;                     
            return 'translate(' + horz + ',' + vert + ')';       
        });                                                    

        legend.append('rect')                                    
        .attr('width', legendRectSize)                         
        .attr('height', legendRectSize)                        
        .style('fill', color)                                  
        .style('stroke', color)
       .on('click', function(label) {                            // NEW
          var rect = d3.select(this);                             // NEW
          var enabled = true;                                     // NEW
          var totalEnabled = d3.sum(dataset.map(function(d) {     // NEW
            return (d.enabled) ? 1 : 0;                           // NEW
          }));                                                    // NEW

          if (rect.attr('class') === 'disabled') {                // NEW
            rect.attr('class', '');                               // NEW
          } else {                                                // NEW
            if (totalEnabled < 2) return;                         // NEW
            rect.attr('class', 'disabled');                       // NEW
            enabled = false;                                      // NEW
          }                                                       // NEW

          pie.value(function(d) {                                 // NEW
            if (d.label === label) d.enabled = enabled;           // NEW
            return (d.enabled) ? d.value : 0;                     // NEW
          });                                                     // NEW

          path = path.data(pie(dataset));                         // NEW

          path.transition()                                       // NEW
            .duration(750)                                        // NEW
            .attrTween('d', function(d) {                         // NEW
              var interpolate = d3.interpolate(this._current, d); // NEW
              this._current = interpolate(0);                     // NEW
              return function(t) {                                // NEW
                return arc(interpolate(t));                       // NEW
              };                                                  // NEW
            });                                                   // NEW
        });                                                       // NEW


       legend.append('text')                                     
       .attr('x', legendRectSize + legendSpacing)              
       .attr('y', legendRectSize - legendSpacing)              
       .text(function(d) { return d; })
   };

$rootScope.renderPieChart=函数（数据集、dom\u元素\u to\u append\u to）{
var width=$（dom\u元素\u to\u append\u to）.width（），
高度=$（窗口）.height（）-120，
半径=数学最小值（宽度、高度）/2；
var donutWidth=75；
变量legendRectSize=18；
var legendSpacing=4；
dataset.forEach（函数（项）{
item.enabled=true；
});
/*var color=d3.scale.ordinal（）
.范围（[“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”）；
*/
var color=$rootScope.defaultColorScheme；
var svg=d3.select（dom\u元素到附加到）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var arc=d3.svg.arc（）
.外层（半径-10）
.内半径（半径-宽度）；
var pie=d3.layout.pie（）
.sort（空）
.value（函数（d）{返回d.value；}）；
var tooltip=d3.select（dom_元素_to_append_to）
.append（'div'））
.attr（'class'，'tooltip'）；
工具提示。追加（'div'）
.attr（'class'，'label'）；
工具提示。追加（'div'）
.attr（'class'，'count'）；
工具提示。追加（'div'）
.attr（“类别”、“百分比”）；
var path=svg.selectAll（'path'）
.数据（饼图（数据集））
.输入（）
.append（'路径'）
.attr（'d'，弧）
.attr（'fill'，函数（d，i）{
返回颜色（d.data.label）；
})
.each（函数（d）{this.\u current=d；}）；
在（'mouseover'，函数（d）{
var total=d3.sum（dataset.map）（函数（d）{
返回（d.enabled）？d.value:0；
}));             
变量百分比=数学四舍五入（1000*d.data.value/总）/10；
tooltip.select（'.label'）.html（d.data.label.toUpperCase（））.style（'color'，'black'）；
tooltip.select（'.count'）.html（d.data.value）；
工具提示。选择（'.percent'）.html（percent+'%'）；
/*//console.log（百分比）；
//console.log（工具提示。选择（'.percent'））；*/
样式（'display'，'block'）；
工具提示。样式（'opacity'，2）；
});  
path.on（'mousemove'，函数（d）{
tooltip.style（'top'，（d3.event.layerY+10）+'px'）
.style（'left'，（d3.event.layerX-25）+'px'）；
}); 
on（'mouseout'，function（）{
样式（'display'，'none'）；
工具提示.样式（'opacity'，0）；
});  
var legend=svg.selectAll（“.legend”）
.data（color.domain（））
.输入（）
.append（'g'）
.attr（'类'，'图例'）
.attr（'transform'，函数（d，i）{
变量高度=legendRectSize+legendSpacing；
var offset=height*color.domain（）.length/2；
var horz=-2*legendRectSize；
var vert=i*高度-偏移量；
返回“translate”（“+horz+”，“+vert+”）；
});                                                    
图例.append（'rect'）
.attr（'width'，legendRectSize）
.attr（'height'，legendRectSize）
.style（'填充'，颜色）
.style（'笔划'，颜色）
.on（'click'，函数（标签）{//NEW
var rect=d3。选择（此）；//新建
var enabled=true；//新建
var totalEnabled=d3.sum（dataset.map）（函数（d）{//NEW
返回（d.enabled）？1:0；//新建
}))；//新的
如果（rect.attr（'class'）='disabled'）{//NEW
rect.attr（'class'，''）；//新建
}else{//NEW
如果（totalEnabled<2）返回；//新建
rect.attr（'class'，'disabled'）；//新建
enabled=false；//新建
}//新的
pie.value（函数（d）{//NEW
如果（d.label==label）d.enabled=enabled；//新建
返回（d.enabled）？d.value:0；//新建
})；//新的
path=path.data（饼图（数据集））；//新建
path.transition（）//新建
.持续时间（750）//新