François Richard François Richard - 6 months ago 99
Javascript Question

D3 pie chart not updating

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

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