Javascript 数据输入/输出处理程序

在d3.js中如何调用进入/退出处理程序？我已经发布了一个帖子，并在这里复制了代码。为了清晰起见，我还贴了几张照片

当

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]，
数据2=[1,2,3,4,5,6,7,8,9,10]，
数据=数据1，
格式=函数（）{
var text=参数[0]，
args=Array.prototype.slice.call（参数，1）；
返回文本。替换（/{（\d+）}/g，函数（匹配，编号）{
返回args[number]的类型！=“未定义”？args[number]：匹配；
});
};
可变宽度=400，
高度=400，
外层=数学最小值（宽度、高度）/2，
内半径=外半径*.6，
颜色=d3.scale.category20（），
donut=d3.layout.pie（），
arc=d3.svg.arc（）.innerRadius（innerRadius）.outerRadius（outerRadius）；
//获取圆环图的默认设置
var-vis，弧；
vis=d3。选择（“主体”）
.append（“svg”）.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（'class'，'pie'）；
arcs=vis.selectAll（'path'）。数据（圆环（数据））；
arcs.enter（）
.append（'svg:path'）
.attr（'transform'，format（“translate（{0}，{0}）”，outerRadius））
.attr（'fill'，函数（d，i）{返回颜色（i）；}）
.attr（'d'，弧）
.each（函数（d）{this.\u previous=d；}）
.on（'click'，函数（d，i）{
data=data==data1？data2:data1；
圆弧数据（圆环（数据））
.transition（）
.持续时间（750）
.attrween（'d'，函数（a）{
var i=d3.内插（此项为a）；
这个。_previous=i（0）；
返回函数（t）{
返回弧（i（t））；
};
});
});
arcs.exit（）.remove（）；

看来我自己已经部分解决了这个问题。我在这里发布了一篇文章并复制了代码

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();
});

---

看来我自己解决了一部分问题。我在这里发布了一篇文章并复制了代码

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();
});