D3.js 使用D3版本4的具有折叠框的D3树

我们可以在这里使用这个示例并实现可折叠树图。我们希望在这里有框，而不是与文本对齐的圆圈。 下面是我们试图使用Version4实现的图表。 请让我们知道需要使用d3版本4对上述代码进行哪些更改才能实现这一点

---

我已对代码进行了必要的更改，以满足您的要求

希望对你有帮助

.node rect{ 笔画宽度：3px； } .节点文本{ 字体：12px无衬线； 填充：fff； } .链接{ 填充：无； 中风：ccc； 笔画宽度：2px； } 树形变种= { 名称：节点名称1， 子名称：代码N1， 填充物：橙色， 儿童：[ { 名称：节点名称2.1， 子名称：代码N1， 填充：蓝色 }, {name:NODE name 2.2，子名称：CODE N1，fill:blue}， {名称：节点名称2.3，子名称：代码N1，填充：蓝色， 儿童：[ {name:NODE name 3.3，fill:blue，subname:CODE N1， 儿童：[{ 名称：节点名称4.1，子名称：代码N1， 填充：d281d2 } ] }, {name:NODE name 3.4，fill:blue，subname:CODE N1， 儿童：[{ 名称：节点名称4.2，子名称：代码N1， 填充：d281d2 } ] } ] } ] }; //设置图表的尺寸和边距 var margin={顶部：20，右侧：90，底部：30，左侧：90}， 宽度=960-margin.left-margin.right， 高度=500-margin.top-margin.bottom； //将svg对象附加到页面主体 //将“组”元素附加到“svg” //将“组”元素移动到左上角 var svg=d3.selectbody.appendsvg .attrwidth，width+margin.right+margin.left .attrhight，height+margin.top+margin.bottom .附录 .转换，翻译 +margin.left+，+margin.top+； var i=0， 持续时间=750， 根 //声明树布局并指定大小 var treemap=d3.tree.size[高度、宽度]； //指定父对象、子对象、高度和深度 root=d3.hierarchytreeData，函数d{返回d.children；}； root.x0=高度/2； root.y0=0； //在第二层之后崩溃 根、儿童、前肢塌陷； updateroot； //折叠节点及其所有子节点 功能崩溃{ ifd儿童{ d、 _children=d.children d、 _.儿童 d、 children=null } } 函数更新资源{ //为节点指定x和y位置 var treeData=treemaproot； //计算新的树布局。 var nodes=treeData.substands， links=treeData.substands.slice1； //为固定深度进行规格化。 nodes.forEachfunctiond{d.y=d.depth*180}； //*******************节点部分*************************** //更新节点。。。 var node=svg。选择所有“g.node” .datanodes，函数d{return d.id | | d.id=++i；}； //在父对象的上一个位置输入任何新模式。 var nodenter=node.enter.append'g' .attr'class'，'node' .attr转换，函数{ 返回translate+source.y0+，+source.x0+； } 。点击，点击； 变量rectHeight=60，rectWidth=120； nodeEnter.append'rect' .attr'class'，'node' .attrwidth，rectWidth .attr高度，rect高度 .attrx，0 .属性，矩形高度/2*-1 .attrrx，5 .stylefill，函数{ 返回d.data.fill； }; //为节点添加标签 nodeEnter.append'text' .attrdy，-.35em .attrx，函数d{ 返回13； } .attr文本锚定，功能为{ 返回启动； } .textfunctiond{return d.data.name；} .附录span .attrdy，1.75em .attrx，函数d{ 返回13； } .textfunctiond{return d.data.subname；}； //更新 var nodeUpdate=nodeEnter.mergenode； //转换到节点的正确位置 nodeUpdate.transition .持续时间 .attrtransform，函数为{ 返回translate+d.y+，+d.x+； }; //更新节点属性和样式 节点更新。选择“循环。节点” .attr'r'，10 .stylefill，函数{ 返回d.(U儿童)lightsteelblue:fff； } .attr'光标'，'指针'； //删除任何现有节点 var nodeExit=node.exit.transition .持续时间 .attr转换，函数{ 返回translate+source.y+，+source.x+； } 去除 //退出时，将节点圆的大小减小为0 nodeExit。选择“循环” .attr'r'，1e-6； //退出时减少文本标签的不透明度 nodeExit。选择“文本” .样式“填充不透明度”，1e-6； //*******************链接部分*************************** //更新链接。。。 var link=svg.selectAll'path.link' .datalinks，函数d{return d.id；}； //在父对象的上一个位置输入任何新链接。 var linkEnter=link.enter.insert'path'，g .attr类，链接 .attr'd'，函数d{ var o={x:source.x0，y:source.y0} 返回对角线o，o }; //更新 var linkUpdate=linkEnter.mergelink； //转换回父元素位置 linkUpdate.transition .持续时间 .attr'd'，函数d{返回对角线，d.parent}； //删除任何现有链接 var linkExit=link.exit.transition .持续时间 .attr'd'，函数d{ var o={x:source.x，y:source.y} 返回对角线o，o } 去除 //存储旧位置以进行转换。 nodes.foreachd函数{ d、 x0=d.x； d、 y0=d.y； }; //创建从父节点到子节点的曲线对角线路径 函数对角线，d{ path=`M${s.y}${s.x} C${s.y+d.y/2}${s.x}， ${s.y+d.y/2}${d.x}， ${d.y}${d.x}` 返回路径 } //在单击时切换子项。 功能点击{ 如果你有孩子{ d、 _children=d.children； d、 children=null； }否则{ d、 儿童=d.\U儿童； d、 _children=null； } 更新； } }

---

您必须用svg矩形替换所有圆形元素，谢谢Roopashree。上面的解决方案对我很有效。嗨，我们能给链接添加一个标签吗，这样鼠标悬停在链接上时，它会显示一个文本？类似于这里使用的D3V5。