How do I add my own animation?

[9526xu]

When I create d3pie Object and then I add My own pie animation,But I found the animation to be useless。 this is my code:

this.width = 504;
this.height = 303;

console.log('height:width' + this.height + ':' + this.width);
// 颜色生成器
var color = d3.scaleOrdinal(d3.schemeCategory20);

var dataset = [{
  num: 30,
  name: 'type_1'
},
{
  num: 10,
  name: 'type_2'
},
{
  num: 43,
  name: 'type_3'
},
{
  num: 13,
  name: 'type_4'
}
];

// 转化所需要的数组对象
function transferPieData (array) {
  var data = new Array();
  array.forEach(function (d, index) {
    var content = new Object();
    content.label = d.name;
    content.value = d.num;
    content.color = color(index);
    data.push(content);
  });
  return data;
}

var d3PieData = transferPieData(dataset);
// 开头加载动画效果
var isLoadEveent = 'none';
var pie = new d3pie('chart', {
  'header': {
    'title': {
      'text': '测试',
      'fontSize': 20,
      'font': 'courier'
    },
    'subtitle': {
      'color': '#999999',
      'fontSize': 10,
      'font': 'courier'
    },
    'titleSubtitlePadding': 10
  },
  'footer': {
    'color': '#999999',
    'fontSize': 10,
    'font': 'open sans',
    'location': 'bottom-left'
  },
  'size': {
    'canvasWidth': this.width,
    'canvasHeight': this.height,
    'pieInnerRadius': '80%',
    'pieOuterRadius': '82%'
  },
  'data': {
    'sortOrder': 'label-desc',
    'content': d3PieData
  },
  'labels': {
    'outer': {
      'format': 'none',
      'pieDistance': 20
    },
    'inner': {
      'format': 'none'
    },
    'mainLabel': {
      'fontSize': 11
    },
    'percentage': {
      'color': '#999999',
      'fontSize': 11,
      'decimalPlaces': 0
    },
    'value': {
      'color': '#cccc43',
      'fontSize': 11
    },
    'lines': {
      'enabled': true,
      'color': '#777777'
    },
    'truncation': {
      'enabled': true
    }
  },
  'tooltips': {
    'enabled': true,
    'type': 'placeholder',
    'string': '{label}: {value}, {percentage}%',
    'styles': {
      'backgroundOpacity': 0.61
    }
  },
  'effects': {
    'load': {
      'effect': 'none'
    },

    'pullOutSegmentOnClick': {
      'effect': 'circle',
      'speed': 400,
      'size': 20
    }
  },
  'misc': {
    'colors': {
      'segmentStroke': '#000000'
    },
    canvasPadding: {
      // top: 0,
      right: 100
      // bottom: 0,
      // left: 0
    }

  },
  callbacks: {
    onMouseoverSegment: null,
    onMouseoutSegment: null,
    onClickSegment: null,
    onload: function () {
      console.log('asdasdas');
    }
  }

});

animate(pie);

function animate (pie) {
  // 获取圆
  var svg = pie.svg;
  var paths = d3.selectAll('.' + pie.cssPrefix + 'arc path');

  var bigArc = d3.arc()
    .innerRadius(pie.innerRadius + 20)
    .outerRadius(pie.outerRadius + 20)
    .startAngle(0)
    .endAngle(function (d) {
      return (d.value / pie.totalSize) * 2 * Math.PI;
    });

  paths.transition().duration(function (d, i) {
    return 10000;
  }).delay(function (d, i) {
    // debugger
    console.log('延迟1:' + 1000 * (i))
    return 10000 * (i);
  }).attr('d', function (d) {
    return bigArc(d);
  }).transition().duration(function (d, i) {
    return 1000;
  }).delay(function (d, i) {
    // 第二个回来动作 不需要延迟。。
    return 0;
  }).attr('d', function (d) {
    return pie.arc(d);
  });

  var pieDataset = pie.options.data.content;
  // 加上数字变化
  var texts = svg.append('g').attr('name', 'text')
    .selectAll('text').data(pieDataset)
    .enter()
    .append('text')
    .attr('transform', 'translate(' + (pie.pieCenter.x) + ',' + (pie.pieCenter.y) + ')').attr('opacity', 1);

  texts.transition().duration(function (d, i) {
    return 1000;
  }).delay(function (d, i) {
    return 1000 * (i);
  }).tween('text', function (d, i) {
    
    var lastNum = (i === pieDataset.length - 1 ? 0 : i + 1);
    var change = d3.interpolateNumber(d.percentage, pieDataset[lastNum].percentage);
    var node = d3.select(this);
    // 与 v3不同 function this 代表不同 v3 代表当前 dom  v4 代表 Window
    return function (t) {
      var output = Math.round(change(t))
      node.text(output + '%');
      // d3.select(this).text('asdas');
    };
  }).attr('opacity', 1).transition().duration(function (d) {
    return 0;
  }).delay(function (d, i) {
    // 第二个回来动作 不需要延迟。。
    return 0;
  }).attr('opacity', 0);
}