円グラフをホバーするとツールチップが生成されない

Question

d3を使用して円グラフを作成しようとしています。私はサイトclick hereから概念を学んだが、私はツールチップが を示していない円グラフの一部にカーソルを合わせると、ここで

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

を使用し、私のCSSスタイルのコードだと、ここの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; }) 
    }; 

ためのコードです

、それは全体の円グラフは を追加しようとしていると、ここでのサンプルデータセットは

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

だとデータセットとDOM要素をとる関数であります

の代わりにdisplay：none、display：cssでブロックするもの私は不透明度を試しました：1、不透明度：0のものですが、まだ結果はありません。事前

Answer 1

で おかげで、今では `dom_element_to_append_to`は何ですか？ここでは作業コードです

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