Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

264
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda