我的数据来自使用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)


谢谢!

最佳答案

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

在JavaScript代码中调用饼图后,只需键入:

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

10-06 05:27
查看更多