單擊按鈕或輸入搜索字段時，使用新數據重繪D3餅圖

Question

我的數據來自使用JSON格式的外部API。 數據正確進入了D3圖表。

搜索術語（在這種情況下為用戶）時，會有新的數據，但是餅圖需要刷新或重繪圖表中的新數據（數組），但我認為這不能很好地工作。

簡而言之：

當單擊類.updateButton的HTML按鈕時，我希望餅圖重新繪制（或刷新）新數據-來自搜索到的字符串-。

      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)   

謝謝！

Answer 1

我所做的是空的id =“” ，d3pie在html中指向它。

在JavaScript代碼中調用餅圖后，只需鍵入：

 $('#TheIdOfYourPie').empty();