d3对更新数据重复svg

Question

每当我的图表填充新数据时，就会生成一个新的svg元素。更新模式排序在新生成的svg中添加了新的圆圈，并且还删除了删除的圆圈。但我无法弄清楚为什么它会在数据更改时继续生成新的svg元素。

        var margin = 20,
            width = 960,
            height = 400;


        var svg = d3.select('#authorities').append('svg')
                .attr('width', width)
                .attr('height', height);

        function update(data) {
            // calculate minimum/maximum for axis
            var y_extent = d3.max(data, function(d){ return d.NumberOfAuthorities}) + 1;
            var x_extent = d3.min(data, function(d){ return d.ReimbursementTimeline}) + 20;

            // accept values between min and max extent
            var x_scale = d3.scale.linear()
                .range([margin, width-margin])
                .domain([0, x_extent]);

            var y_scale = d3.scale.linear()
                .range([height-margin, margin])
                .domain([0, y_extent]);

            var circle = svg.selectAll('circle')
                .data(data, function(d) { return d.Country; });

            circle
                .enter()
                    .append('circle')
                        .attr('cy', function(d){return y_scale(d.NumberOfAuthorities)})
                        .attr('cx', function(d){return x_scale(d.ReimbursementTimeline)})
                        .attr('data-country', function(d){return d.Country})
                        .attr('r', function(d){ return (d.NumberOfAuthorities * d.ReimbursementTimeline)/10});

            circle.exit().remove();
        }

        update(data);