D3 pie chart not updating

Question

I know the question has been asked many times but here I don't know what's wrong with my construction. .draw() is called once at the beginning then update() is called when new data arrrive, any idea what's wrong ? Thanks a lot:

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

try to use the following parts of code and see if they solve your problem.

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