Javascript 如何在d3.js中的圆形包装布局中插入饼图？

我正在尝试使用d3.js中的圆形停车场布局创建图表，如中所示

圈{
填充：rgb（31、119、180）；
填充不透明度：.25；
行程：rgb（31、119、180）；
笔画宽度：1px；
}
.叶圈{
填充：#ff7f0e；
填充不透明度：1；
}
正文{
字体：10px无衬线；
}
变量直径=960，
格式=d3。格式（“，d”），
数据源=2；
var pack=d3.layout.pack（）
.尺寸（[直径-3，直径-3]）
.填充（2）
.排序（功能（a、b）{
返回-（a.值-b.值）；
})
.value（函数（d）{返回d.size；}）；
pie=d3.layout.pie（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，直径+300）
.attr（“高度”，直径）；
var data=getData（）；
var vis=svg.datum（数据）。选择全部（“.node”）
.data（包节点）
.输入（）
.附加（“g”）；
var titles=相对附加（“title”）
.文本（功能（d）{
如果（！d.children）{
返回d.parent.name.toUpperCase（）+“-”+
d、 名称+“：”+d.size；
}否则{
返回d.name；
}
});
变量圆=可视附加（“圆”）
.attr（“笔划”，“bbbbbb”）
.样式（“不透明度”，函数（d）{
return！d.children？0.8:0.2；
})
.样式（“填充”，功能（d）{
返回“#f5467”；
})
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）
.attr（“r”，函数（d）{返回d.r；}）；
var arcs=vis.append（“路径”）
.attr（“填充”、“无”）
.attr（“id”，函数（d，i）{return“s”+i；}）
var arcPaths=vis.append（“g”）
.样式（“填充”、“海军蓝”）；
var labels=arcPaths.append（“文本”）
.样式（“不透明度”，函数（d）{
如果（d.depth==0）{
返回0.0；
}
如果（！d.children）{
返回0.0；
}
var sumOfChildrenSizes=0；
d、 forEach（函数（child）{sumofChildrenSize+=child.size；}）；
//警报（儿童人数）；
如果（sumOfChildrenSizes我稍微修改了您的代码。我希望这可能是您想要的。

这是一个粗略的示例代码。
我只关注如何在pack布局中创建piechart，没有修改标签或其他内容



圈{
填充：rgb（31、119、180）；
填充不透明度：.25；
行程：rgb（31、119、180）；
笔画宽度：1px；
}
.叶圈{
填充：#ff7f0e；
填充不透明度：1；
}
正文{
字体：10px无衬线；
}
var pie=d3.layout.pie（）.value（函数（d）{
返回d.size；
});
var color=d3.scale.category10（）；
变量drawCircle=函数（选择）{
选择。附加（“圆”）
.attr（“笔划”，“bbbbbb”）
.样式（“不透明度”，函数（d）{
return！d.children？0.8:0.2；
})
.样式（“填充”，功能（d）{
返回“#f5467”；
})
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）
.attr（“r”，函数（d）{返回d.r；}）；
};
var drawPieChart=功能（选择）{
var d=selection.datum（）；
var arc=d3.svg.arc（）
.外层（d.r）
.内半径（0）；
var arcg=selection.attr（“转换”、“平移”（“+d.x+”，“+d.y+”））
.selectAll（“.arc”）
.数据（pie（d.儿童））
.enter（）.append（“g”）
.attr（“类”、“弧”）；
arcg.append（“路径”）
.attr（“d”，弧）
.样式（“填充”，功能（d，i）{
返回颜色（i）；
});
};
变量直径=960，
格式=d3。格式（“，d”），
数据源=2；
var pack=d3.layout.pack（）
.尺寸（[直径-3，直径-3]）
.填充（2）
.排序（功能（a、b）{
返回-（a.值-b.值）；
})
.value（函数（d）{返回d.size；}）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，直径+300）
.attr（“高度”，直径）；
var data=getData（）；
var vis=svg.datum（数据）。选择全部（“.node”）
.data（包节点）
.输入（）
.附加（“g”）
.每个功能（d）{
如果（！d.children）
返回；
if（d.children[0]。children）{
drawCircle（d3.选择（此））；
}否则{
绘图图表（d3.选择（此））；
}                   
});
var titles=相对附加（“title”）
.文本（功能（d）{
如果（！d.children）{
返回d.parent.name.toUpperCase（）+“-”+
d、 名称+“：”+d.size；
}否则{
返回d.name；
}
});
var arcs=vis.append（“路径”）
.attr（“填充”、“无”）
.attr（“id”，函数（d，i）{return“s”+i；}）
var arcPaths=vis.append（“g”）
.样式（“填充”、“海军蓝”）；
var labels=arcPaths.append（“文本”）
.样式（“不透明度”，函数（d）{
如果（d.depth==0）{
返回0.0；
}
如果（！d.children）{
返回0.0；
}
var sumOfCh