There are a few problems with your code. First, your check whether the SVG exists already doesn't work because of scoping issues. The better way to do it is to select the element you want and check whether your selection is empty.
var svg = d3.select("svg > g");
if(svg.empty()){
svg = d3.select(this).append("svg:svg").attr("width", width)
.attr("height", height)
.append("svg:g")
.attr("transform", "translate(" + (width - r) / 2 + "," + (height - r) / 2 + ")");
}
Note that I've merged the appending of the g
element into this, as that is what you're operating on.
Second, you need to handle the update and exit selections in addition to the enter selection. I've added that to your jsfiddle here.