d3退出函数返回undefined

Question

我试图从选择中删除元素但是调用exit会给我一个带有未定义值的选择数组。

// short version
var data = [{frequency: 0.08167, letter: 'A'}, 
{frequency: 0.01492, letter: 'B'}, 
{frequency: 0.02782, letter: 'C'}]

var selection = d3.select('body').append('svg').append('g').data(data);
data = data.splice(0,1)
var d = selection.data(data, function(d){return d.letter;})
d.enter() // <-- this gives me [data[1].data[2]]
d.exit()  // <-- this gives me [undefined * 3]

// --------------------------------------------------------------------------
// long version

function drawPie(ele, data, opt) {
var svg = d3.select(ele)
    .append('svg')
    .attr('width', opt.width)
    .attr('height', opt.height);

var g = svg.append('g')
    .attr('transform', 'translate('+ opt.width/2 + ',' + opt.height/2 + ')');

var pie = d3.pie()
    .value(function (d) {
        return +d.frequency;
    })
    .sort(function (a,b) {
        return b.frequency - a.frequency;
    })
    .padAngle(.01);

var arc = d3.arc()
    .innerRadius(0)
    .outerRadius(200);

var color = d3.scaleOrdinal(d3.schemeCategory20);
var trans = d3.transition().duration(1000).ease(d3.easeLinear);
var pi = pie(data);
var arcs = g.selectAll('.arc')
    .data(pi)
var group = arcs.enter()
    .append('g')
    .attr('class', 'arc');

var slices = group.append('path')
    .attr('d', arc)
    .style('fill', function (d) {
        return color(d.data.frequency);
    })
    .on('click', update);

function update (d, i) {
    data.splice(i, 1)
    var selection = arcs
        .data(pie(data), function (d) {
            return d.data.letter;
        })
    selection.enter()
        .append('g')
        .attr('class', 'arc')
        .append('path')
        .style('fill', function (d) {
            return color(d.data.frequency);
        })
        .attr('d', arc)
        .on('click', update)
    selection.exit() // <-- This is [undefined * 3]
        .remove();
}

如果我理解正确，调用enter（）应该给我更新选择，exit（）应该给我一个我切出来的。