Tengo un gráfico de media dona d3.js que muestra un progreso en %, así:
El gráfico obtiene los datos json de un script php con la función jQuery getJSON. Lo que me gustaría es actualizar el gráfico cada minuto, pero sin tener que hacer un setInterval en todo el script. ¿Es posible simplemente reemplazar los datos del gráfico cada minuto?
Mi script gráfico:
var w = 300, h = 300, outerRadius = (w / 2) - 10, innerRadius = 85; var percent = Math.round(json.bhp * 100); var ratio = percent / 100; var pie = d3.layout.pie() .value(function(d){return d}) .sort(null); var color = ['#ececec','#f6c717','#888888'], colorOld = '#F00', colorNew = '#f6c717'; var arc = d3.svg.arc() .innerRadius(innerRadius) .outerRadius(outerRadius) .startAngle(0) .endAngle(Math.PI); var arcLine = d3.svg.arc() .innerRadius(innerRadius) .outerRadius(outerRadius) .startAngle(0); var svg = d3.select('#bhp') .append('svg') .attr({ width :w, height:160, }) .append('g') .attr({ transform:'translate('+w/2+','+h/2+')' }); var path = svg.append('path') .attr({ d :arc, transform:'rotate(-90)' }) .attr({ 'stroke-width':"1", stroke :"#666666" }) .style({ fill:color[0] }); var pathForeground = svg.append('path') .datum({endAngle:0}) .attr({ d :arcLine, transform:'rotate(-90)' }) .style({ fill: function (d, i) { return color[1]; } }); var middleCount_bhp = svg.append('text') .datum(0) .text(function(d){ return d; }) .attr({ class :'middleText', 'text-anchor':'middle', dy :0, dx :5 }) .style({ fill :d3.rgb('#000000'), 'font-size':'60px' }); var oldValue = 0; var arcTween = function(transition, newValue, oldValue) { transition.attrTween('d', function (d) { var interpolate = d3.interpolate(d.endAngle, ((Math.PI)) * (newValue / 100)); var interpolateCount = d3.interpolate(oldValue, newValue); return function (t) { d.endAngle = interpolate(t); middleCount_bhp.text(Math.floor(interpolateCount(t)) + '%'); return arcLine(d); }; }); }; pathForeground.transition() .delay(200) .duration(750) .ease('cubic') .call(arcTween, percent, oldValue);