可拼图树与饼作为节点

Question

我已经通过添加圆形，矩形，符号和图像来创建可折叠树。 但我想构建它并需要在节点的位置放置饼图。我是D3的新手，所以尝试将饼图添加为节点的位置。但它只是附加到第一个。 你能告诉我这样做的方法吗。这就是我到目前为止所做的。

nodeEnter.append("svg").data([data]).attr("width", "50")
                        .attr("height", "50").append("g")
                        .attr("transform", "translate(" + r + "," + r + ")")
                        .selectAll("g.slice").data(pie).enter().append("g").attr("class", "slice")
                        .append("svg:path")
                        .attr("fill", function(d, i){
                        return color[i];
                        })
                        .attr("d", function (d) {

                        return arc(d);
                        });

我附上了工作小提琴：https://jsfiddle.net/0odgqgsk/

请相应修改。 提前谢谢。