数据进入/退出处理程序

Question

如何在d3.js中激发进入/退出处理程序？我发布了fiddle here并在此处复制了代码。为清晰起见，我还发布了几张图片。

当data = [13, 15, 21, 42, 5, 18]

时

过渡到data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

它究竟应该如何

var data1 = [13, 15, 21, 42, 5, 18],
    data2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    data = data1,
    format = function () {
        var text = arguments[0],
            args = Array.prototype.slice.call(arguments, 1);
        return text.replace(/{(\d+)}/g, function(match, number) { 
            return typeof args[number] != 'undefined' ? args[number]: match;
        });
    };

var width = 400,
    height = 400,
    outerRadius = Math.min(width, height) / 2,
    innerRadius = outerRadius * .6,
    color = d3.scale.category20(),
    donut = d3.layout.pie(),
    arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius);

//Get default settings for a donut chart
var vis, arcs;

vis = d3.select("body")
    .append("svg").attr("width", width)
    .attr("height", height)
    .attr('class', 'pie');

arcs = vis.selectAll('path').data(donut(data));

arcs.enter()
    .append('svg:path')
    .attr('transform', format("translate({0}, {0})", outerRadius))
    .attr('fill', function(d, i) { return color(i); })
    .attr('d', arc)
    .each(function(d) { this._previous = d; })
    .on('click', function(d, i) {
        data = data === data1 ? data2: data1;
        arcs.data(donut(data))
       .transition()
            .duration(750)
            .attrTween('d', function(a) {
                var i = d3.interpolate(this._previous, a);
                this._previous = i(0);
                return function(t) {
                    return arc(i(t));
                };
            });
    });

arcs.exit().remove();

Answer 1

好吧，我似乎已经部分解决了这个问题。我发布了fiddle here并在此处复制了代码。

var data1 = [13, 15, 21, 42, 5, 18],
    data2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    data = data1, set = 1,
    format = function() {
        var text = arguments[0],
            args = Array.prototype.slice.call(arguments, 1);
        return text.replace(/{(\d+)}/g, function(match, number) {
            return typeof args[number] != 'undefined' ? args[number] : match;
        });
    };

var width = 400,
    height = 400,
    outerRadius = Math.min(width, height) / 2,
    innerRadius = outerRadius * .6,
    color = d3.scale.category20(),
    donut = d3.layout.pie(),
    arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius);

var vis, arcs;

vis = d3.select("svg")
    .attr("width", width)
    .attr("height", height)
    .attr('class', 'pie');

function update(){
    data = data === data1 ? data2: data1;
    arcs = vis.selectAll('path')
        .data(donut(data));

    arcs.enter()
        .append('svg:path')
        .attr('transform', format("translate({0}, {0})", outerRadius))
        .attr('fill', function(d, i) { return color(i); })
        .attr('d', arc).each(function(d) { this._previous = d; });

    arcs
        .transition()
            .duration(750)
            .attrTween('d', function(a) {
                var i = d3.interpolate(this._previous, a);
                this._previous = i(0);
                return function(t) {
                    return arc(i(t));
                };
            });

    arcs.exit().remove();
}

update();
d3.select(window).on('click', function(){
  update();
});