D3.js 以饼图为节点的可协作树

D3.js 以饼图为节点的可协作树,d3.js,D3.js,我已经通过添加圆、矩形、符号和图像创建了可折叠树。 但我想构建它,需要在节点处放置饼图。我是D3新手,所以尝试添加饼图作为节点的位置。但它只是附加到第一个。 你能告诉我怎么做吗?这是我到目前为止试过的方法 nodeEnter.append("svg").data([data]).attr("width", "50") .attr("height", "50").append("g") .attr("t

我已经通过添加圆、矩形、符号和图像创建了可折叠树。 但我想构建它,需要在节点处放置饼图。我是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);
                        });
我正在连接工作小提琴:

请相应地修改它。 提前谢谢