D3 Donut Übergang, d, i immer undefine

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

Bogen (d) immer wieder zurückkehren "M0,0Z" ..

fand ich, dass der Grund, wenn Bogen unter arcTween Aufruf, alle d, kehre ich undefine . Wie kann ich das lösen? hier

Codes: https://jsfiddle.net/m8oupfne/3/

Endprodukt:

Answer 1

Paar Dinge:

1. Auf den ersten Blick Ihre attrTween Funktion funktioniert nicht, weil Ihre arc Funktion ist abhängig auf beiden d,i und Sie nurpassierendazu.

2. Aber, behebt das nicht Ihren Diagrammübergang schön? Warum? Weil Ihre Lichtbogenfunktion keinen Sinn zu machen scheint. Sie verwenden pie, um Winkel zu berechnen und diese dann in Ihrer arc-Funktion zu überschreiben. Und jeder Anruf an die arc Funktion berechnet endAngle das gleiche, da es auf d.value basiert.

Also, wenn Sie eine benutzerdefinierte Winkelberechnung möchten, rufen Sie nicht pie überhaupt, aber vorab berechnen Sie Ihre endAngle und nicht tun es in Ihrem arc Funktion.

arc wird:

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

Pre-Berechnung der Daten:

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

arcTween wird:

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

Laufcode:

(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) + ')'); 
 
\t \t \t \t 
 
     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; 
 
        }); 
 
\t \t \t 
 
     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){ 
 
     \t 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); 
 
      } 
 
      }); 
 
\t \t 
 
     })(window.d3); 
 
\t \t \t

<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>