在D3.js中切换数据集会显示意外行为

Question

我希望能够使用D3.js在两个数据集之间切换。当我切换时，我希望旧数据集淡出，同时新数据集淡入。

我已经对这段代码进行了一段时间的攻击，但我没有得到我想要的行为。选择以下小提琴并尝试单击文本Dataset1和Dataset2。

例如，当我第一次单击Dataset1时，工作正常，但是当我稍后单击Dataset2时，我无法获得所有Dataset2值。如果我现在再次点击Dataset1没有任何反应，我必须点击才能让事情发生。此外，我永远无法显示数据集2的所有九个元素。

我错过了什么？

var dataset1 = [1,2,3,4],
    dataset2 = [1,2,3,4,5,6,7,8,9],
    svg = d3.select("body").append("svg");

update = function(newDataset){
    var allArrows = svg.selectAll(".arrow"),
        addNew; 

    addNew = function (){
            allArrows
            .data(newDataset)
            .enter()
            .append("line")
            .attr({
                opacity : 0,
                "stroke-width" : 1,
                stroke : "blue",
                class : "arrow",
                x1 : 10,
                y1 : function (d, i) { return 10 * i + 10 },
                x2 : 50,
                y2 : function (d, i) { return 10 * i + 10}
            })
            .transition()
            .duration(500)
            .attr({
                opacity : 1
            });
    });

    if ( !allArrows.empty() ) {
        allArrows
        .data([])
        .exit()
        .transition()
        .duration(500)
        .attr("opacity", 0);
        .remove();
        addNew();
    }
    else {
        addNew();
    }
    return chart;
};

http://jsfiddle.net/favetelinguis/pWqLL/1/