悬停饼图时未生成工具提示

【问题标题】：Tooltip not generating when hovering a pie chart悬停饼图时未生成工具提示
【发布时间】：2016-12-20 08:15:57
【问题描述】：

我正在尝试使用 d3 构建饼图。我从网站click here 学到了这个概念，但是当我将鼠标悬停在饼图的一部分上时，工具提示没有显示 这是我使用的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; })
   };

它是一个函数，它获取整个饼图要附加的数据集和 dom 元素 这是一个示例数据集

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

而不是 display: none, display: block thing in css 我也尝试过 opacity: 1, opacity: 0 的东西，但仍然没有结果。 提前致谢

【问题讨论】：

• 什么是dom_element_to_append_to？它是在 SVG 之外由内而外吗？为什么你有position: absolute？
• dom_element_to_append_to 是饼图附加到的html文件中的dom元素，如
• 看来您已经具备了将其转换为可运行堆栈 sn-p 的所有要素。你能做到这一点并将其简化为展示问题的最小示例吗？
• 您还有其他问题，因为代码正在运行：jsfiddle.net/4e78v670