Tooltip not generating when hovering a pie chart

Question

I am trying to build a pie chart using the d3. I learned the concept from the site click here but when i hover over a part of pie chart the tooltip is not showing here's my css style code used

#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 */
  }    

and here's the code for the js part

$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; })
   };

it is a function which takes the dataset and the dom element to which the whole pie chart is going to append and here's a sample dataset

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

instead of display: none, display: block thing in css i have also tried to opacity: 1, opacity: 0 thing but still no result. Thanks in advance

Answer 1

now it's generating here's a working code

  $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; })
   };