title: Redraw D3 Pie Chart with new data when clicking button or enter search field
body: <p>My data is coming from an external API that uses JSON format. The data is coming correctly into the D3 chart.</p>
  
  <p>When searching an term (in this case a user) there is coming new data, but the Pie Chart needed to refresh or redraw with the new data (arrays) in the chart, which isn't working well I think.</p>
  
  <p>So to be short: </p>
  
  <p>When clicking on the HTML button with class <code>.updateButton</code> I want the Pie Chart to redrawn (or refresh) with the new data - that is coming from the searched string -.</p>
  
  <pre><code>      var app = angular.module('nounTranslate', []);
    var json;
  
    // $("#updateButton").on("click", function(d) {
    //   getData();
    // });
  
    app.controller('apiController', function getData() {
  
  var searchstr;
  
  $(".searchField").on("keydown",function (e) {
    // if else die checkt of het de enter is die je indrukt
    if(e.keyCode == 13) {
      // searchstr wordt de value van .classname
      searchstr = this.value 
      console.log(searchstr);
      // voer de apicontroller function uit
  
    var request_data = {
        url: 'oath.php',
        method: 'GET',
        data: {
          term: searchstr,
          site: 'http://api.thenounproject.com/'
        } 
    };
  
    $.ajax({
        url: request_data.url,
        type: request_data.method,
        data: request_data.data,
        dataType: "json"
    }).done(function (jsondata) {   
  
        console.log(jsondata);
  
        // HIER KOMT DE API DATA BINNEN  
  
        //nieuwe (json)data zodat het niet conflict raakt 
        json = jsondata;  
  
        d3.json("dataExample.json", function drawPie (data) {   
  
          setTimeout(function() {
  
          }, 600);  
  
          $(".updateButton").on("click", function(d) {
            console.log('update!');
            getData();
          });  
  
          var pie = d3.layout.pie()
            .padAngle(.02) // Ruimte tussen de arcs
            .value(function(d) { // Vormt de data om naar de layout van de pie chart 
                return (d.count_download);
            })
  
          var body = d3.select("body");
  
          var div = body.append("div")  
              .attr("id","chart")
              .attr("class","chart")
  
          // De omvang van de donut chart
          var width = 660,
              height = 660;
  
          // Maakt de donut chart rond   
          var outerRadius = height / 2.5,
              innerRadius = outerRadius,
              colors = d3.scale.category20c(); // Gebruikt een preset aan matchende kleuren
  
          //Informatie weergaven arcs    
          var infoHover = d3.select('#chart').append('div')
              .style('position', 'absolute')
              .style('padding', '0 25px')
              .style('opacity', 0)
  
          //Veranderd hoogte - (inner)radius arc     
          var arcOver = d3.svg.arc()
              .innerRadius(outerRadius / 2 + 50)
              .outerRadius(100);     
  
          var arc = d3.svg.arc()
              .outerRadius(100)
              .innerRadius(outerRadius / 2)      
  
          //Plaats de chart in de div 
          var svg = d3.select("#chart").append("svg")
              .data(data)
              .attr("width", width)
              .attr("height", height)
            .append("g")         
              .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") //Positie chart
            .selectAll('path').data(pie(jsondata.uploads)) // Selecteerd onderstaand path, gebruikt pie layout en de data
            .enter().append('path')
              .attr('fill', function(d, i) {
                  return colors(i); // Voeg de kleuren (category20c) toe bij alle data: index
              })
              .each(function(d) { d.outerRadius = outerRadius - 20; }) 
              .attr('d', arc) // Maakt de arc (buitenste cirkel)   
  </code></pre>
  
  <p>Thanks!</p>