D3 Kreisdiagramm nicht aktualisiert

Question

Ich weiß, dass die Frage schon oft gestellt wurde, aber hier weiß ich nicht, was mit meiner Konstruktion nicht stimmt. .draw() wird einmal am Anfang aufgerufen, dann wird update() aufgerufen, wenn neue Daten ankommen, irgendeine Idee, was ist falsch? Vielen Dank:

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

versuchen Sie, die folgenden Teile des Codes zu verwenden und sehen, ob sie Ihr Problem lösen.

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