//remove and create svg"svg").remove(); 
var svg ="body").append("svg").attr("width","960").attr("height", "600"),
inner = svg.append("g");


There are two steps to implement the 'redraw' effect you want:

First, I suppose you want the svg canvas to be drawn only once when the page is loaded for the first time, and then update the chart in the svg instead of remove and redraw the svg:

 var svg ="body")
 // put data in an array with only one element

 // this ensures there is only one consistent svg on the page when data is updated(when the script gets executed) 

Second, understanding enter(), exit(), there are many great tutorials about this. In your case, I would suggest to draw the donut something like this:

var path = svg.selectAll(".donut")  

// bind data to elements, now you have elements belong to one of those 
// three 'states', enter, exit, or update

// for `enter` selection, append elements
path.enter().append("path").attr("d", arc).attr("fill", "teal")

// for `update` selection, which means they are already binded with data
path.transition().attrTween("d", someFunction) // apply transition here if you want some animation for data change

// for `exit` selection, they shouldn't be on the svg canvas since there is no corresponding data, you can then remove them


Create one function that (re)draws the pie when it's created and when it's updated.

New data should be added to pie using enter() and old data should be removed using exit().remove()

It is as simple as this:

            .attr("fill", function(d, i) { return color(i); })
            .attr("d", arc)
            .each(function(d) {this._current = d;} );

            .attrTween("d", arcTween);


Full working code -> JSFIDDLE

Related Query

More Query from same tag