Javascript 制作D3饼图v4示例-在初始渲染时设置动画

我是从这个出发点开始工作的： 有一件事我不明白，为什么它在开始时没有动画。有没有一个简单的改变，我可以使这个动画最初

通常情况下，我会将属性设置为零，但我不知道如何让attrTween最初设置动画

有什么建议吗

如果方便的话，可以添加为代码段

var svg=d3.选择（“主体”）
.append（“svg”）
.附加（“g”）
svg.append（“g”）
.attr（“类”、“切片”）；
svg.append（“g”）
.attr（“类别”、“标签”）；
svg.append（“g”）
.attr（“类别”、“行”）；
可变宽度=500，
高度=200，
半径=数学最小值（宽度、高度）/2；
var pie=d3.layout.pie（）
.sort（空）
.价值（功能（d）{
返回d值；
});
var arc=d3.svg.arc（）
.外表面（半径*0.8）
.内半径（半径*0.4）；
var outerArc=d3.svg.arc（）
.内半径（半径*0.9）
.外层（半径*0.9）；
attr（“transform”、“translate”（+width/2+）、“+height/2+”）；
var key=函数（d）{return d.data.label；}；
var color=d3.scale.ordinal（）
.domain（[“Lorem ipsum”、“dolor sit”、“amet”、“Concetetur”、“Adipising”、“elit”、“sed”、“do”、“eiusmod”、“Temporal”、“IncidUnt”]）
.范围（[“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”）；
函数随机数据（）{
var labels=color.domain（）；
返回labels.map（函数（标签）{
返回{label:label，value:Math.random（）}
});
}
更改（随机数据（））；
d3.选择（“随机化”）
.on（“单击”，函数（）{
更改（随机数据（））；
});
功能更改（数据）{
/*----派片-------*/
var slice=svg.select（“.slices”）.selectAll（“path.slice”）
.数据（饼图（数据），键）；
slice.enter（）
.插入（“路径”）
.style（“fill”，函数（d）{返回颜色（d.data.label）；}）
.attr（“类”、“切片”）；
片
.transition（）.持续时间（1000）
.attrTween（“d”，函数（d）{
这个。|电流=这个。|电流| d；
var interpolate=d3.interpolate（该电流，d）；
该值为._电流=插值（0）；
返回函数（t）{
返回弧（插值（t））；
};
})
slice.exit（）
.remove（）；
/*----文本标签-------*/
var text=svg。选择（“.labels”）。选择全部（“文本”）
.数据（饼图（数据），键）；
text.enter（）
.append（“文本”）
.attr（“dy”，“.35em”）
.文本（功能（d）{
返回d.data.label；
});
函数midAngle（d）{
返回d.startAngle+（d.endAngle-d.startAngle）/2；
}
text.transition（）.持续时间（1000）
.attrTween（“转换”，函数（d）{
这个。|电流=这个。|电流| d；
var interpolate=d3.interpolate（该电流，d）；
该值为._电流=插值（0）；
返回函数（t）{
var d2=插值（t）；
var pos=外表面质心（d2）；
位置[0]=半径*（中间角（d2）
正文{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
宽度：400px；
高度：400px；
位置：相对位置；
}
svg{
宽度：100%；
身高：100%；
}
路径切片{
笔画宽度：2px；
}
多段线{
不透明度：.3；
笔画：黑色；
笔画宽度：2px；
填充：无；
}

随机化
问题是，为了查看过渡，您需要为楔块设置不同于其最终状态的初始状态

在图表初始加载时，检查是否定义了当前的
，如果没有，则为其分配一些初始数据：

  if(!this._current) this._current = startSlice; // assign initial data
  else this._current = this._current || d;       // otherwise, continue as before.

其中
startSlice
可能看起来像：

var startSlice = {
 startAngle: 0,
 endAngle: 0,
 padAngle:0,
 value:0,
 data: {lable:"",value:0}
}

或者你需要它来满足你的需要。我只更新了下面动画中的楔块：


var svg=d3.选择（“主体”）
.append（“svg”）
.附加（“g”）
svg.append（“g”）
.attr（“类”、“切片”）；
svg.append（“g”）
.attr（“类别”、“标签”）；
svg.append（“g”）
.attr（“类别”、“行”）；
可变宽度=500，
高度=200，
半径=数学最小值（宽度、高度）/2；
var pie=d3.layout.pie（）
.sort（空）
.价值（功能（d）{
返回d值；
});
var arc=d3.svg.arc（）
.外表面（半径*0.8）
.内半径（半径*0.4）；
var outerArc=d3.svg.arc（）
.内半径（半径*0.9）
.外层（半径*0.9）；
attr（“transform”、“translate”（+width/2+）、“+height/2+”）；
var key=函数（d）{return d.data.label；}；
var color=d3.scale.ordinal（）
.domain（[“Lorem ipsum”、“dolor sit”、“amet”、“Concetetur”、“Adipising”、“elit”、“sed”、“do”、“eiusmod”、“Temporal”、“IncidUnt”]）
.范围（[“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”）；
函数随机数据（）{
var labels=color.domain（）；
返回labels.map（函数（标签）{
返回{label:label，value:Math.random（）}
});
}
更改（随机数据（））；
d3.选择（“随机化”）
.on（“单击”，函数（）{
更改（随机数据（））；
});
功能更改（数据）{
/*----派片-------*/
var startSlice={
startAngle:0，
端角：0，
焊盘角度：0，
值：0，
数据：{lable:，值：0}
}
var slice=svg.select（“.slices”）.selectAll（“path.slice”）
.数据（饼图（数据），键）；
slice.enter（）
.插入（“路径”）
.风格（“填充”，有趣