d3.js - D3 donut 过渡，d,i 未定义

Question

        var arcMin = 75;        // inner radius of the first arc
        var arcWidth = 25;      // width
        var arcPad = 10;         // padding between arcs

        var arc = d3.arc()
                  .innerRadius(function(d, i) {
                    return  arcMin + i*(arcWidth) + arcPad;
                  })
                  .outerRadius(function(d, i) {
                    return arcMin + (i+1)*(arcWidth);
                  })
                  .startAngle(0 * (PI/180))
                  .endAngle(function(d, i) {
//                    console.log(d);       <----getting undefine under attrTween Call
                    return 2*PI*d.value/100;
                  });

        var path = g.selectAll('path')
          .data(pie(dataset))
          .enter()
          .append('path')
          .attr('d', arc)
          .attr('fill', function(d, i) { 
            return d.data.color;
          })
          .transition()
          .delay(function(d, i) {
            return i * 800;
          });
//          .attrTween('d', function(d) {
//            // This part make my chart disapear
//             var i = d3.interpolate(d.startAngle, d.endAngle);
//             return function(t) {
//               d.endAngle = i(t);
//               return arc(d);
//             }
//            // This part make my chart disapear
//          });

arc(d) 总是返回 "M0,0Z"..

我发现原因是在arcTween下调用arc时，所有的d,i都返回undefine。我该如何解决这个问题。

这里的代码: https://jsfiddle.net/m8oupfne/3/

完成品:

Answer 1

夫妇的事情:

乍一看您的 attrTween功能不起作用，因为您的 arc函数依赖于 d,i而你只通过 d到它。

但是，修复它不会使您的图表转换得很好？为什么？因为你的 arc 函数似乎没有任何意义。您使用 pie计算角度，然后在您的 arc 中覆盖它们功能。并且每次调用 arc函数计算 endAngle相同，因为它基于 d.value .

因此，如果您想要自定义角度计算，请不要调用 pie完全没有，但预先计算您的 endAngle并且不要在您的 arc 中这样做功能。
arc变成:

var arc = d3.arc()
  .innerRadius(function(d, i) {
    return  arcMin + i*(arcWidth) + arcPad;
  })
  .outerRadius(function(d, i) {
    return arcMin + (i+1)*(arcWidth);
  });

预先计算数据:

dataset.forEach(function(d,i){
  d.endAngle = 2*PI*d.value/100;
  d.startAngle = 0;
});

arcTween变成:

.attrTween('d', function(d,i) {
  var inter = d3.interpolate(d.startAngle, d.endAngle);             
  return function(t) {
    d.endAngle = inter(t);
    return arc(d,i);
  }
});

运行代码:

 (function(d3) {
        'use strict';

 
        var dataset = [
          { label: 'a', value: 88, color : '#898989'},
          { label: 'b', value: 56 , color : '#898989'},
          { label: 'c', value: 20 , color : '#FDD000'},
          { label: 'd', value: 46 , color : '#898989'},
        ];
      
        var PI = Math.PI;
        var arcMin = 75;        // inner radius of the first arc
        var arcWidth = 25;      // width
        var arcPad = 10;         // padding between arcs
        var arcBgColor = "#DCDDDD";
      
        var width = 360;
        var height = 360;
        var radius = Math.min(width, height) / 2;
        var donutWidth = 15;                            // NEW

        var svg = d3.select('#canvas')
          .append('svg')
          .attr('width', width)
          .attr('height', height);
      
       var gBg = svg.append('g').attr('transform', 'translate(' + (width / 2) + 
            ',' + (height / 2) + ')');
       var g = svg.append('g')
          .attr('transform', 'translate(' + (width / 2) + 
            ',' + (height / 2) + ')');
				
        var arc = d3.arc()
                  .innerRadius(function(d, i) {
                    return  arcMin + i*(arcWidth) + arcPad;
                  })
                  .outerRadius(function(d, i) {
                    return arcMin + (i+1)*(arcWidth);
                  });

        var arcBg = d3.arc()
                  .innerRadius(function(d, i) {
                    return  arcMin + i*(arcWidth) + arcPad;
                  })
                  .outerRadius(function(d, i) {
                    return arcMin + (i+1)*(arcWidth);
                  })
                  .startAngle(0 * (PI/180))
                  .endAngle(function(d, i) {
                    return 2*PI;
                  });
			
        var pie = d3.pie()
          .value(function(d) { return d.value; })
          .sort(null);

      
        var pathBg = gBg.selectAll('path')
          .data(pie(dataset))
          .enter()
          .append('path')
          .attr('d', arcBg)
          .attr('fill', arcBgColor );
          
        dataset.forEach(function(d,i){
        	d.endAngle = 2*PI*d.value/100;
          d.startAngle = 0;
        });
        
        var path = g.selectAll('path')
          .data(dataset)
          .enter()
          .append('path')
          .attr('fill', function(d, i) { 
            return d.color;
          })
          .transition()
          .duration(800)
          .delay(function(d, i) {
           return i * 800;
          })
          .attrTween('d', function(d,i) {
             var inter = d3.interpolate(d.startAngle, d.endAngle);             
             return function(t) {
               d.endAngle = inter(t);
               return arc(d,i);
             }
          });
		
      })(window.d3);
			

<script src="https://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/d3js/4.6.0/d3.min.js"></script>
   <div id="canvas"></div>