javascript - Update data in simple D3.js doughnut chart with animation -
i playing around simple d3.js chart. updated removing svg group , create new chart. want change update paths after new data come without removing svg. however, not updating , have no idea doing wrong. fiddle
js
var update_counter = 0; function drawchart() { var pie_d = 185, r = pie_d / 2, piedata = [1, math.random() * 10], pie = d3.layout.pie(), arc = d3.svg.arc().innerradius(60).outerradius(r); update_counter++; if (!document.queryselectorall('.svg svg').length) { d3.select('.svg').append('svg:svg') .data([piedata]) .attr('width', pie_d) .attr('height', pie_d); } else { d3.select('.svg svg') .data([piedata]); } var arcs = d3.select('.svg svg').selectall('g') .data(pie) .enter().append('svg:g') .attr('transform', 'translate(' + r + ',' + r + ')'); arcs.append('svg:path') .attr('d', arc) .attr('class', function (d, i) { return === 0 ? 'onl' : 'ter' }); d3.select('.counter').text(update_counter); } drawchart(); setinterval(function () { drawchart() }, 5000);
udpate
nearly there still animation 'jump' fiddle
Comments
Post a Comment