Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

266
Vistas
Actualizar dinámicamente el gráfico de media dona D3: ¿cómo?

Tengo un gráfico de media dona d3.js que muestra un progreso en %, así:

ingrese la descripción de la imagen aquí

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);
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda