How to update a pie chart?

Question

I'm trying to make a pie chart that is updated when I press the button "2016" but instead of updating I create a new pie chart, how can I change the values of my pie chart? Thanks in advance. I tried to search a question but all of them are so specific.

var dataset = [{
  key: "Alumnos",
  value: 15
}, {
  key: "AlumnosFCT",
  value: 12
}];
var w = 300;
var h = 300;
var outerRadius = w / 2;
var innerRadius = 0;

var arc = d3.svg.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius);


var color = d3.scale.ordinal()
  .domain([15, 12])
  .range(["#FF4081", "#3F51B5"]);

var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

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

var arcs = svg.selectAll("g.arc")
  .data(pie(dataset))
  .enter()
  .append("g")
  .attr("class", "arc")
  .attr("transform", "translate(" + outerRadius + ", " + outerRadius + ")");

arcs.append("path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", arc);

arcs.append("text")
  .attr("transform", function(d) {
    return "translate(" + arc.centroid(d) + ")";
  })
  .attr("text-anchor", "middle")
  .attr("font-family", "sans-serif")
  .text(function(d) {
    return d.value;
  });

d3.selectAll("button").on("click", function() {
  var paragraphID = d3.select(this).attr("id");
  if (paragraphID == "2016") {
    dataset.push({
      key: "Alumnos",
      value: 20
    }, {
      key: "AlumnosFCT",
      value: 18
    });
    dataset.shift();
    dataset.shift();
  }

  var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);


  var color = d3.scale.ordinal()
    .domain([15, 12])
    .range(["#FF4081", "#3F51B5"]);

  var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

  var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) {
      return d.value;
    });
  var arcs = svg.selectAll("g.arc")
    .data(pie(dataset))
    .enter()
    .append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + outerRadius + ", " + outerRadius + ")");

  arcs.append("path")
    .attr("fill", function(d, i) {
      return color(i);
    })
    .attr("d", arc);
  arcs.append("text")
    .attr("transform", function(d) {
      return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")
    .attr("font-family", "sans-serif")
    .text(function(d) {
      return d.value;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<button id="2016">2016</button>

Answer 1

In general, d3 is pretty good about managing DOM elements as long as you work within their API. In that way you can write a function that can create new elements for new data, or update existing elements with new data pertaining to those elements.

See the following updated version of your code snippet, specifically pulling out the data dependent DOM manipulations into a function called update:

/*** 
* Original Code
***/

var dataset = [{
  key: "Alumnos",
  value: 15
}, {
  key: "AlumnosFCT",
  value: 12
}];
var w = 300;
var h = 300;
var outerRadius = w / 2;
var innerRadius = 0;

var arc = d3.svg.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius);


var color = d3.scale.ordinal()
  .domain([15, 12])
  .range(["#FF4081", "#3F51B5"]);

var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

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

/*** 
* update function for data dependent manipulations
***/
function update(data) {
  var arcs = svg.selectAll("g.arc").data(pie(data));
  arcs.exit().remove();
  arcs.enter().append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + outerRadius + ", " + outerRadius + ")");

  var paths = arcs.selectAll('path').data(function (d, i) {
    d.idx = i;
    return [d];
  })
  paths.enter().append('path');
  paths
  	.attr("fill", function(d) {
      return color(d.idx);
    })
    .attr("d", arc);
  
  var texts = arcs.selectAll('text').data(function (d) {
    return [d];
  })
  texts.enter().append('text');
  texts.attr("transform", function(d) {
      return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")
    .attr("font-family", "sans-serif")
    .text(function(d) {
      return d.value;
    });
}

update(dataset);

/*** 
* Handler to set new data based on button clicked
***/
d3.select('button').on('click', function() {
  var newData;
  if (this.id === '2016') {
    newData = [{
      key: "Alumnos",
      value: 20
    }, {
      key: "AlumnosFCT",
      value: 18
    }];
    
    update(newData);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<button id="2016">2016</button>

(depending on your browser, you might need to scroll the view to see the "2016" button)

Note the following advantages:

• only elements whose data need to change are updated when update is called.
• if you add a new data point when updating, a new element will be added without touching elements that should remain unchanged (via enter)
• if you remove a data point when updating, that element will be removed (via exit)

---

d3 version: 3.4.11