D3円グラフが更新されない

Question

私は何度も質問されていることは知っていますが、ここで私の建設に何が問題なのか分かりません。 .draw（）は最初に一度呼び出され、新しいデータが取得されたときにupdate（）が呼び出されます。ありがとうございます。

function Donut(el, data, params) { 
     var self = this; 
     this.el = el; 
     this.initChart(data,params); 
    } 

    Donut.prototype.initChart = function(data, params) { 
     var self = this; 
     this.margin = { 
      top: 5, 
      right: 10, 
      bottom: 5, 
      left: 0 
     } 
     this.width = $(this.el).width() - this.margin.left - this.margin.right; 
     this.height = $(this.el).height() - this.margin.top - this.margin.bottom; 
     this.radius = Math.min(this.width,this.height)/2; 

     var visWidth = $(this.el).width(); 
     var visHeight = $(this.el).height(); 

     this.svg = d3.select(this.el) 
      .append('svg') 
      .attr("class", 'donut') 
      .attr("width", visWidth) 
      .attr("height", visHeight) 
      .append('g') 
      .attr('class','donutLayer') 
      .attr('transform', 'translate(' + visWidth/2 + ',' + visHeight/2 + ')'); 

     this.arc = d3.svg.arc() 
      .outerRadius(this.radius-20) 
      .innerRadius(25); 

     this.draw(data, params); 

    } 

    Donut.prototype.draw = function(data,params) { 
     var self = this; 
     this.data = data; 

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

     this.color = this.findColor(data.occupationRate); 

     this.data = this.parseData(data); 

     this.g = self.svg.selectAll('.arc') 
      .data(self.pie(self.data)); 

     this.g.enter().append("g") 
      .attr("class", "arc"); 

     this.g.append("path") 
      .attr("d", self.arc) 
      .style("fill", function(d) { 
       return d.data.color; 
      }); 

     this.g.append('text') 
      .attr('transform', function() { 
       return "translate(2,9)"; 
      }) 
      .style({'font-size':'20px', 'fill': self.color}) 
      .text(function() { 
       return data.occupationRate + '%'; 
      }); 

     this.g.append('text') 
      .attr('transform', function() { 
       return "translate(90,10)"; 
      }) 
      .attr('id', params.id+'Label') 
      .style({'font-size':'25px', 'fill': self.color}) 
      .text(function() { 
       return params.name; 
      }); 
    } 

    Donut.prototype.update = function(data, params) { 
     var self = this; 
     var parsedData = this.parseData(data); 
     //console.log('update sidebarmyseat'); 
     window.data = parsedData; 
     window.pie = self.pie(parsedData); 
     this.pie.value(function(d) { return d.taux; }); 
     this.g.data(self.pie(parsedData)); 
     this.g.selectAll('path') 
      .attr("d", self.arc) 
      .style("fill", function(d) { 
       return d.data.color; 
     }); 
    } 

    Donut.prototype.findColor = function findColor(or) { 
     if(or <= 50) { 
      var color = '#48ba56'; 
     } else if(or > 50 && or <= 75) { 
      var color = '#fba22e'; 
     } else if(or >75) { 
      var color = '#e70033'; 
     } 

     return color; 
    } 

    Donut.prototype.parseData = function(data) { 
     var self = this; 
     var parsedData = [ 
      { 
       type: 'occupée', 
       taux: data.occupationRate, 
       color: self.color 
      }, 
      { 
       type: 'libre', 
       taux: 100 - data.occupationRate, 
       color: '#d2d2d2' 
      }, 
     ]; 
     return parsedData; 
    } 

    return Donut; 
}); 

Answer 1

次のコード部分を使用して問題が解決するかどうかを確認してください。

Donut.prototype.draw = function(data, params) { 
 
    // ... 
 
    this.g.selectAll('.percentage-text') // Selection :O 
 
    .data(function(d) { // Set data to corresponding selection  
 
     return [d]; 
 
    }) 
 
    .enter() 
 
    .append('text') // Append node text 
 
    .attr('class', 'percentage-text') // Add class to later have reference on how to update 
 
    .attr("transform", function(d) { // Use function to position text inside arcs [http://bl.ocks.org/mbostock/3887193] 
 
     return "translate(" + self.arc.centroid(d) + ")"; 
 
    }) 
 
    .text(function(d) { // Set text with desired values 
 
     return d.data.taux; 
 
    }); 
 
    // ... 
 
} 
 

 
Donut.prototype.update = function(data, params) { 
 
    var self = this; 
 
    var parsedData = this.parseData(data); 
 
    //console.log('update sidebarmyseat'); 
 
    window.data = parsedData; 
 
    window.pie = self.pie(parsedData); 
 
    this.pie.value(function(d) { 
 
    return d.taux; 
 
    }); 
 
    this.g.data(self.pie(parsedData)) // setting new data to you .arc elements and returns [Array[2]] with the updated slices 
 
    .select('path') // select the path of the newly updated slices 
 
    .attr('d', self.arc) // use your arc fn to redefine the path of the slice 
 

 
    // Update text 
 
    this.g.selectAll('.percentage-text') // Use our class defined in draw to select desired update nodes 
 
    .data(function(d) { // Set new data 
 
     return [d]; 
 
    }) 
 
    .attr("transform", function(d) { // Position 
 
     return "translate(" + self.arc.centroid(d) + ")"; 
 
    }) 
 
    .text(function(d) { // Set text 
 
     return d.data.taux; 
 
    }); 
 
}