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