Javascript 弧形粗花线是捕捉，而不是设置动画

我一直在做一个饼图，上面有一系列的弧

我已经做了一个演示，但是弧形二字夹正在捕捉，而不是平滑地设置动画。如果有人可以帮助增强它，使其具有动画效果，而不是捕捉周围的圆弧，那就太好了

我已经硬编码了选择器阈值。这些弧线看起来并不正确，只是看起来很突然

var arcGenerator = {
    radius: 100,
    oldData: "",
    init: function(data){
        var clone = jQuery.extend(true, {}, data);
        this.oldData = this.setData(clone, false);
        this.setup(this.setData(data, true));           
    },
    update: function(data){
        var clone = jQuery.extend(true, {}, data);          
        this.animate(this.setData(data, true));         
        this.oldData = this.setData(clone, false);
    },
    animate: function(data){
        var that = this;

        var chart = d3.select(".arcchart");
        that.generateArcs(chart, data);
    },  
    setData: function(data, isSorted){

        var diameter = 2 * Math.PI * this.radius;

        var localData = new Array();

        var innerPieSliceTotal = 0;
        for (x in data) {
            innerPieSliceTotal += data[x].value;
        }

        var displacement = 0;
        var oldBatchLength = 0;

        if(isSorted){
            data.sort(function(a, b) {  
                return b.value - a.value;
            });
        }           

        $.each(data, function(index, value) {               
            var riseLevels = value.riselevels;
            var machineType = value.label;              
            var innerPieSliceValue = value.value;

            var ratioToWorkWith = innerPieSliceValue/innerPieSliceTotal;
            var riseLevelCount = riseLevels.length;

            if(oldBatchLength !=undefined){             
                displacement+=oldBatchLength;
            }

            var arcBatchLength = (2*ratioToWorkWith)*Math.PI;
            var arcPartition = arcBatchLength/riseLevelCount;

                $.each(riseLevels, function( ri, value ) {
                    var startAngle = (ri*arcPartition);
                    var endAngle = ((ri+1)*arcPartition);

                    if(index!=0){
                        startAngle+=displacement;
                        endAngle+=displacement;
                    }

                    riseLevels[ri]["startAngle"] = startAngle;
                    riseLevels[ri]["endAngle"] = endAngle;
                    riseLevels[ri]["machineType"] = machineType;                    
                });

            oldBatchLength = arcBatchLength;

            localData.push(riseLevels);
        });

        var finalArray = new Array();

        $.each(localData, function(index, value) {
            $.each(localData[index], function(i, v) {
                finalArray.push(v);
            });
        });

        return finalArray;

    },
    generateArcs: function(chart, data){

        var that = this;

        //append previous value to it.          
        $.each(data, function(index, value) {               
            data[index]["previousEndAngle"] = that.oldData[index].endAngle; 
        });     

        var arcpaths = chart.selectAll("path")
                .data(data);

            arcpaths.enter().append("svg:path")
                .attr("class", function(d, i){
                    return d.machineType;
                })  
                .style("fill", function(d, i){
                    return d.color;
                })
                .transition()
                .ease("elastic")
                .duration(750)
                .attrTween("d", arcTween);

            arcpaths.transition()
                .ease("elastic")
                .duration(750)
                .attrTween("d",arcTween);

            arcpaths.exit().transition()
                .ease("bounce")
                .duration(750)
                .attrTween("d", arcTween)
                .remove();  

        function arcTween(b) {
            var i = d3.interpolate({value: b.endAngle-0.1}, b);

            return function(t) {
                return that.getArc()(i(t));
            };
        }           
    },
    setup: function(data){      
        var chart = d3.select("#threshold").append("svg:svg")
                .attr("class", "chart")
                .attr("width", 420)
                .attr("height", 420)
                    .append("svg:g")
                    .attr("class", "arcchart")
                    .attr("transform", "translate(200,200)");

        this.generateArcs(chart, data);     
    },
    getArc: function(){
        var that = this;

        var arc = d3.svg.arc()
                .innerRadius(that.radius)
                .outerRadius(function(d){
                    var maxHeight = 100;
                    var ratio = (d.height/maxHeight * 100)+that.radius;
                    return ratio;
                })
                .startAngle(function(d, i){
                    return d.startAngle;
                })
                .endAngle(function(d, i){
                    return d.endAngle;
                });

        return arc;
    }
}

您的arcTween函数在错误的值之间插值。在这种情况下，您需要的是在已经计算的endAngle到previousEndAngle的数据元素和未修改的元素之间进行插值。下面的代码实现了这一点

 function arcTween(b) {
   var prev = JSON.parse(JSON.stringify(b));
   prev.endAngle = b.previousEndAngle;
   var i = d3.interpolate(prev, b);

   return function(t) {
     return that.getArc()(i(t));
   };
 }

---

完整示例。

您的JSFIDLE有1200多行代码。请你把范围缩小到一个最小的例子好吗？我很难弄清楚从何时何地调用什么。Lars，我已经压缩了插件/饼图代码。如果你能检查一下arcGenerator函数，谢谢。我的评论是为了让你更容易理解。我仍然不知道你在哪里更新图表的那一部分-更新函数似乎根本没有选择阈值。只是编辑了第一篇文章，包含了弧生成器的整个目标函数。澄清一下-问题不是我们没有完整的代码。问题是要弄清楚所有的东西是如何组合在一起的，以及从何处被称为什么。我建议您尝试制作一个再现问题的最小示例，即删除所有不需要显示的代码。