Javascript D3JS花瓣/花卉图表。如何适应使用数据

我正在尝试改编杰里米·斯图基的“动画花卉”作品

根据我提供的每个花瓣大小的数据，创建单个非动画花朵

我使用此小提琴中脚本生成的数据创建了一朵花：

花瓣的数量应该基于提供的数据（myPetalData）中的行数-这应该相对容易

var myPetalData = [
 {id:0, size:1, petLen:1, petWid:0.25},
 {id:1, size:2, petLen:1, petWid:0.5},
 {id:2, size:2.5, petLen:1, petWid:0.6},
 {id:3, size:5, petLen:1, petWid:1.0}
]

我的主要问题是如何为单个花瓣的构建提供数据（我仍在学习Javascript和D3）。 花瓣可以基于myPetalsData中指定的“size”变量，或者理想情况下是长度和宽度变量petLen、petWid的组合。大小或Len+Wid应编码为D3Scales，以容纳真实世界的数据。我还希望删除网格依赖项，除非petal构造需要它

对于基本掌握Javascript和D3的人来说，这应该是一个简单的问题。如果有任何建议或更新的提琴能让我走上正确的道路，我将不胜感激

谢谢

蒂姆

也许

var宽度=500，
高度=500，
半半径=50；//花瓣的长度&因此整个花瓣的大小
var size=d3.scale.sqrt（）
.domain（[0，1]）
.范围（[0，半半径]）；
变量myPetalData=[
{id:0，大小：1}，
{id:1，大小：2}，
{id:2，大小：2.5}，
{id:3，大小：.1}
]
var pie=d3.layout.pie（）
.sort（空）
.value（函数（d）{返回d.size；}）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var petal=svg.selectAll（“.petal”）
.数据（pie（myPetalData））
.enter（）.append（“路径”）
.attr（“类”、“花瓣”）
.attr（“变换”，函数（d）{返回r（（d.startAngle+d.endAngle）/2）；}）
.attr（“d”，petalPath）
.style（“笔划”，petalStroke）
.样式（“填充”，花瓣填充）；
函数petalPath（d）{
变量角度=（d.endAngle-d.startAngle）/2，
s=极笛卡尔（角，半半径），
e=极笛卡尔坐标（角度、半半径），
r=尺寸（d.数据尺寸），
m={x:half-radius+r，y:0}，
c1={x:half-radius+r/2，y:s.y}，
c2={x:half-radius+r/2，y:e.y}；
返回“M0,0L”+s.x+”、“+s.y+”Q“+c1.x+”、“+c1.y+”、“+m.y+”L“+m.x+”、“+m.y+”Q“+c2.x+”、“+c2.y+”+e.x+”、“+e.y+”Z”；
};
函数petalFill（d，i）{
返回d3.hcl（i/myPetalData.length*360,60,70）；
};
函数petalStroke（d，i）{
返回d3.hcl（i/myPetalData.length*360,60,40）；
};
函数r（角度）{
返回“旋转（“+（angle/Math.PI*180）+”）；
}
函数极坐标（角度、半径）{
返回{
x：数学cos（角度）*半径，
y：数学sin（角度）*半径
};
};