D3.js D3甜甜圈过渡，d，i不确定 var arcMin=75；//第一弧的内半径 var arcWidth=25；//宽度 var arcPad=10；//弧间填充 var arc=d3.arc（） .内半径（函数（d，i）{ 返回arcMin+i*（arcWidth）+arcPad； }) .外层（功能（d，i）{ 返回弧最小值+（i+1）*（弧宽）； }) .startAngle（0*（PI/180）） .端角（功能（d，i）{ //console.log（d）；

两件事：

乍一看，您的

attrween

函数不起作用，因为您的

arc

函数同时依赖于

d和i

，您只将

d

传递给它

但是，修复这一问题并不能使图表很好地过渡？为什么？因为您的圆弧函数似乎没有任何意义。您可以使用

pie

计算角度，然后在

arc

函数中覆盖它们。对

arc

函数的每次调用都会计算

endAngle

相同的角度，因为它基于d.value

因此，如果您想要自定义角度计算，根本不要调用

pie

，而是预先计算

endAngle

，不要在

arc

函数中执行

arc

变为：

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

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

预计算数据：

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

arcTween

变成：

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

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

运行代码：

（功能（d3）{
"严格使用",；
变量数据集=[
{标签：'a'，值：88，颜色：'#8989'}，
{标签：'b'，值：56，颜色：'#8989'}，
{标签：“c”，值：20，颜色：'#FDD000'}，
{标签：“d”，值：46，颜色：'#8989'}，
];
var-PI=Math.PI；
var arcMin=75；//第一个圆弧的内径
var arcWidth=25；//宽度
var arcPad=10；//弧间填充
var arcBgColor=“#DCDDDD”；
var宽度=360；
var高度=360；
变量半径=数学最小值（宽度、高度）/2；
var donutWidth=15；//新建
var svg=d3.select（“#canvas”）
.append（'svg'）
.attr（'width'，width）
.attr（'高度'），高度；
var gBg=svg.append（'g'）.attr（'transform'，'translate（+（width/2）+
",；
var g=svg.append（'g'）
.attr（'transform'，'translate（+（宽度/2）+
",；
var arc=d3.arc（）
.内半径（函数（d，i）{
返回arcMin+i*（arcWidth）+arcPad；
})
.外层（功能（d，i）{
返回弧最小值+（i+1）*（弧宽）；
});
var arcBg=d3.arc（）
.内半径（函数（d，i）{
返回arcMin+i*（arcWidth）+arcPad；
})
.外层（功能（d，i）{
返回弧最小值+（i+1）*（弧宽）；
})
.startAngle（0*（PI/180））
.端角（功能（d，i）{
返回2*PI；
});
var pie=d3.pie（）
.value（函数（d）{返回d.value；}）
.sort（空）；
var pathBg=gBg.selectAll（'path'）
.数据（饼图（数据集））
.输入（）
.append（'路径'）
.attr（'d'，arcBg）
.attr（'fill'，arcBgColor）；
forEach（函数（d，i）{
d、 端角=2*PI*d.value/100；
d、 startAngle=0；
});
var path=g.selectAll（'path'））
.数据（数据集）
.输入（）
.append（'路径'）
.attr（'fill'，函数（d，i）{
返回d.color；
})
.transition（）
.持续时间（800）
.延迟（功能（d，i）{
返回i*800；
})
.attrween（'d'，函数（d，i）{
var inter=d3.插值（d.星形，d.端角）；
返回函数（t）{
d、 端角=内部（t）；
返回弧（d，i）；
}
});
})（窗口d3）；