javascript - 单击按钮或输入搜索字段时使用新数据重绘 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();