Javascript D3树形图和D3圆环图节点

我想在D3树形图的每个节点中添加圆环图，用圆环图替换树中的圆节点

下面是我的代码。我想在每个节点中用甜甜圈图替换圆圈节点，每个节点都有不同的数据，这些数据不能从示例json中读取

//示例JSON数据 var jsondata={ 姓名:CERT,， 儿童：[{ 姓名： }, { 姓名： }, { 名称:DNS， 儿童：[{ 姓名:FW,， 儿童：[{ 姓名： }, { 姓名： }, { 名称:艺发局， 儿童：[{ 姓名： }, { 姓名： }, { 名称：服务器， 儿童：[{ 姓名： }, { 姓名： }] }] }] }] }, { 姓名:FW,， 儿童：[{ 姓名： }, { 姓名： }, { 名称:DNS， 儿童：[{ 姓名： }, { 姓名： }, { 名称:艺发局， 儿童：[{ 名称：服务器 }] }] }] }] }; var保证金={ 前20名， 右:120,， 底数：20， 左：120 }, //宽度=960-margin.right-margin.left，高度=800-margin.top-margin.bottom； 宽度=屏幕宽度； 高度=800-margin.top-margin.bottom； var i=0， 持续时间=750， 根 var tree=d3.layout.tree .分离功能A，b{ 返回a.parent==b.parent？1:2； } .儿童功能{ 返回d.儿童； } .尺寸[高度、宽度]； var diagonal=d3.svg.diagonal .projectionfunctiond{ 返回[d.y，d.x]； }; var line=d3.svg.line .X功能{ 返回d.x； } .功能正常{ 返回d.y； }; var svg=d3.selectbody.appendsvg .attrwidth，width+margin.right+margin.left .attrhight，height+margin.top+margin.bottom .attransform，translate+margin.left+，+margin.top+ .callzm=d3.behavior.zoom.scaleExtent[1,13]。onzoom，redraw.appendg .attransform，translate+350+，+20+；； //将JSON数据放入根变量 root=jsondata； root.x0=高度/2； root.y0=0； //必要的，以便缩放知道从何处缩放和取消缩放 zm.翻译[350,20]； updateroot； //d3.selectself.frameElement.styleheight，800px； 函数更新资源{ //计算新的树布局。 var nodes=tree.nodesroot.reverse， links=tree.linksnodes； //为固定深度进行规格化。 nodes.foreachd函数{ d、 y=d.深度*180； }; //更新节点 var node=svg.selectAllg.node .datanodes，已运行{ 返回d.id | | d.id=++i； }; //在父节点的上一个位置输入任何新节点。 var nodeEnter=node.enter.appendg .attr类、节点 .attr转换，函数{ 返回translate+source.y0+，+source.x0+； } .onclick，单击 .onmouseover，函数d{ var g=d3.selectthis；//节点 //该类用于以后删除附加文本 var info=g.append'text' .归类为“信息”，对吗 .attr'x'，30 .attr'y'，10 .textfunctiond{ 返回d.name； }; } //将鼠标移出时的信息文本删除。 .onmouseout，函数{ d3.选择此选项。选择“text.info”。删除； }; 诺丁特圆 .attrr，1e-6 .stylefill，函数{ 返回d.(U儿童)lightsteelblue:fff； }; nodeEnter.appendtext .attrx，函数d{ 返回d.children | | d.| U儿童？-10:10； } .attrdy，.35em .attr文本锚定，功能为{ 返回d.children | d.| u children？结束：开始； } .textfunctiond{ 返回d.name； } .样式填充不透明度，1e-6； //将节点转换到其新位置。 var nodeUpdate=node.transition //.持续时间 .attr转换，函数{ 返回translate+d.y+，+d.x+； }; nodeUpdate.selectcircle .attrr，已运行{ 返回d.children？20:10； } .stylefill，函数{ 返回d.(U儿童)lightsteelblue:fff； }; nodeUpdate.selecttext .样式填充不透明度，1； //更新链接… var link=svg.selectAllpath.link .数据链接，已运行{ 返回d.target.id； }; //在父对象的上一个位置输入任何新链接。 link.enter.insertpath，g .attr类，链接 .attrd，函数{ 回程线[{ x:d.source.y， y:d.source.x }, { x:d.target.y， y:d.target.x }]; }; //过渡链接到他们的新位置。 链接转换 //.持续时间900 .attrd，函数{ 回程线[{ x:d.source.y， y:d.source.x }, { x:d.target.y， y:d.target.x }]; }; //将退出节点转换到父节点的新位置。 link.exit.transition //.持续时间 .attrd，函数{ 回程线[{ x:d.source.y， y:d.source.x }, { x:d.target.y， y:d.target.x }]; } 去除 //将退出节点转换到父节点的新位置。 变量节点 eExit=node.exit.transition .持续时间 .attr转换，函数{ 返回translate+source.y+，+source.x+； } 去除 nodeExit.selectcircle .attrr，1e-6； nodeExit.selecttext .样式填充不透明度，1e-6； //将旧位置隐藏起来，以便过渡。 nodes.foreachd函数{ d、 x0=d.x； d、 y0=d.y； }; } 函数elbowd，i{ 返回M+d.source.y+，+d.source.x+H+d.target.y+V+d.target.x+d.target.children？：H+margin.right； } //在单击时切换子项。 功能点击{ 如果你有孩子{ d、 _children=d.children； d、 children=null； }否则{ d、 儿童=d.\U儿童； d、 _children=null； } 更新； } //缩放后重新绘制图形 函数重画{ svg.attrtransform，translate+d3.event.translate++scale+d3.event.scale+； } .节点{ 光标：指针； } .节点圆{ 填充：fff； 笔画：钢蓝； 笔划宽度：1.5px； } .节点文本{ 字体：10px无衬线； } .链接{ 填充：无； 中风：ccc； 笔划宽度：1.5px； }

---

你有没有试过？看起来应该是比较直截了当的，但可能有点微妙。我将创建一个可重用对象，该对象可以用数据和一个x，y位置实例化，该位置将根据传入的数据绘制圆环图。然后，你可以为你的节点创建一组圆环图，而不是圆。@Ben Lyall我曾多次尝试将圆环图添加到每个节点，但都失败了。我的尝试是在每个节点中添加一个圆环svg来代替圆圈。