Javascript d3：为什么输入选择不显示甜甜圈图表的任何转换？

我是d3图书馆的新手。我正在尝试创建一个圆环图，在输入、更新和退出选择时进行转换。我的代码就是从中得到启发的。但与此不同的是，我的代码中没有转换。这是代码-

crm = [
    {name: 'SMR', value: 3097},
    {name: 'PSF', value: 3374},
    {name: 'Insurance', value: 1225}
]

 pieTween = function(d, i) {
      var s0;
      var e0;
      if(oldPieData[i]){
        s0 = oldPieData[i].startAngle;
        e0 = oldPieData[i].endAngle;
      } else if (!(oldPieData[i]) && oldPieData[i-1]) {
        s0 = oldPieData[i-1].endAngle;
        e0 = oldPieData[i-1].endAngle;
      } else if(!(oldPieData[i-1]) && oldPieData.length > 0){
        s0 = oldPieData[oldPieData.length-1].endAngle;
        e0 = oldPieData[oldPieData.length-1].endAngle;
      } else {
        s0 = 0;
        e0 = 0;
      }
      var i = d3.interpolate({startAngle: s0, endAngle: e0}, {startAngle: d.startAngle, endAngle: d.endAngle});
      return function(t) {
        var b = i(t);
        return arc(b);
      };
}

var pie = Math.PI * 2;
var w = 500,
    h = 500;
var ir = 45;
var duration = 250;
var chart = d3.select('.chart')
                .attr('width', w)
                .attr('height',h)

createPieChart = function(data){
    var radius = 200;
    var total = 0;
    angular.forEach(data, function(item){
        total+=item.value;
    })

    color = d3.scale.ordinal()
            .range(['#469AB2', '#F0AD4E', '#5CB85C', '#D9534F']);


    groups = chart.append('g')
                .attr('transform', 'translate('+w/2+','+ h/2 + ')');

    // group at the center of donut
    center_group = chart.append('g')
                        .attr("class", "center_group")
                        .attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");
    // displaying total calls at the center
    center_group.append('text')
                .attr('text-anchor', 'middle')
                .text(total);

    arc = d3.svg.arc()
            .innerRadius(radius-60)
            .outerRadius(radius)

    pieChart = d3.layout.pie()
                .value(function(d){ return d.value; });

    oldPieData = pieChart(data);

    arcs = groups.selectAll('path')
            .data(pieChart(data))

    arcsEnter = arcs.enter().append('path')
                .each(function(d) { this._current = d; });

    arcsEnter.attr('class', 'arc')
            .attr('fill', function(d){ return color(d.data.value)})
            .transition().duration(duration).attrTween("d", pieTween)
}

createPieChart(crm);

谁能帮我一下，告诉我为什么没有过渡期

---

这是我的代码

问题是oldPieData数组的初始值，它在转换开始时已经具有新数据的值

客户关系管理=[ {name:'SMR'，值：3097}， {name:'PSF'，value:3374}， {名称：'保险'，价值：1225} ] pieTween=功能化，i{ var s0； var e0； ifoldPieData[i]{ s0=oldPieData[i]。startAngle； e0=oldPieData[i]。端角； }否则，如果！oldPieData[i]&oldPieData[i-1]{ s0=oldPieData[i-1]。端角； e0=oldPieData[i-1]。端角； }否则，如果！oldPieData[i-1]&&oldPieData.length>0{ s0=oldPieData[oldPieData.length-1].endAngle； e0=oldPieData[oldPieData.length-1].endAngle； }否则{ s0=0； e0=0； } 变量i=d3。插值{startAngle:s0，endAngle:e0}，{startAngle:d.startAngle，endAngle:d.endAngle}； 返回函数{ var b=它； 返回arcb； }; } var pie=Math.PI*2； var w=200， h=180； var-ir=45； var持续时间=250； var chart=d3。选择“.chart” .attr'width'，w .attr‘高度’，h； var pieChart=d3.layout.pie .valuefunctiond{return d.value；}， oldPieData=[]； createPieChart=functiondata{ var半径=h/2； var合计=0； data.forEachfunctionitem{ 合计+=项目价值； }, 颜色=d3.scale.ordinal .范围['469AB2'，'F0AD4E'，'5CB85C'，'D9534F']； 组=图表。附加“g” .attr'transform'，'translate'+w/2+'，'h/2+； //位于甜甜圈中心的一组 var center\u group=chart.append'g' .attrclass，中心组 .attransform，translate+w/2+，+h/2+； //显示中心的呼叫总数 中心组。附加“文本” .attr'text-anchor'，'middle' .text总计； arc=d3.svg.arc .内半径半径半径-h/4 .外半径 变量弧=组。选择所有“路径” .datapieChartdata， arcsEnter=arcs.enter.append'path'； arcs.attr'class'，'arc' .attr'fill'，函数d{return colord.data.value} .transition.durationduration.attrTweend，pieTween； 返回数据； }; 创建客户关系管理； .阴暗的背景{ 背景色：F5； 边框：1px实心E3； 边界半径：4px； 盒影：0 2px2pRGBA0,0,0,05； } 阴影背景{ 填充：0.5%； } div.shady-background>span{ 左边距：30px； } 主容器{ 顶部：6.8em； 位置：相对位置； } .chart rect{ 填充：钢蓝； } .图表文本{ /*填充物：白色*/ 字体：10px无衬线； } 饼图部{ 位置：相对位置； 顶部：6em； } .图表{ 位置：相对位置； /*顶部：2米*/ 左：5em； }

---

您需要为d属性设置一个初始值，否则它将跳转到最终值。所以你需要计算出d@CoolBlue的零状态。我怎么能做到？同样在给定的提琴中，我认为d没有被初始化是的，事实上你是对的，当没有以前的数据时，tween处理这个案例。好的，最好的办法是将问题中的代码转换成一个工作片段。同时，尝试以下操作：arcs.attr'class'，arc'.attr'fill'，函数d{return colord.data.value}.transition.durationduration.attrtween，pieTween。转换需要应用于update+enter选择，该选择是selection.data after selection.enter返回的值，而不是enter选择。@CoolBlue感谢您的及时回复。正如您在代码段中告诉我的那样，我将ArcCenter替换为Arc，但仍然没有发生转换。正在等待您的代码片段…抱歉，您误解了我：我正在等待您的代码片段；如果您将问题中的代码转换为最小的工作示例，那么我们就可以找到问题。好的，没问题。顺便说一句，如果您使用snippet工具在这里发布工作代码，而不是链接到jsFiddle，那就更好了。如果我把它放在函数的末尾，转换仍然没有发生是的，必须在转换完成后进行。

---

如果你把它放在函数的末尾，在计划转换之后，但在转换开始之前…那么我应该在哪里做呢？d3是否在转换完成时触发任何事件？在生成新数据之前触发。