Open 9526xu opened 7 years ago
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); }
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: