Javascript 为什么我的D3节点不显示它们的文本？

以下是我的JSFIDLE：

我尝试了将文本附加到节点的典型方式，如下所示：

node.append("text")
        .text(function(d) { return d.name; })
        .attr("text-anchor", "middle")
        .attr("font-size", "1.8em")
        .attr("y", 5);

但出于某种原因，在这种情况下，它不想工作。我从stackoverflow问题中获取了D3图的大部分代码：

---

即使我们的代码几乎相同，询问者得到的解决方案对我也不起作用。有什么想法吗

由于单击侦听器应同时处理圆圈和文本，因此必须将圆圈和文本元素分组。使用elments的transform属性定位节点

变量组件=[{ 名称：组件1， id:c1， 儿童：[{ 名称：硬件1， id:h1， 儿童：[{ 名称:software1， id:s1 }], }, { 名称：硬件2， id:h2， 儿童：[{ 名称:software2， 编号：s2 }, { 名称：software3， id:s3 }] }] }]; var w=600， h=600， 半径=10， 节点， 链接 根 var-force=d3.layout.force .ontick，滴答 .收费{ 返回-500； } .LinkDistanced功能{ 返回d.target.\u子对象？100:50； } .尺寸[w，h-160]； var svg=d3.selectbody.appendsvg .宽度，w .高度，h； 根=组件[0]//设置根节点 root.fixed=true； 根x=w/2； 根y=h/2-80； 使现代化 功能更新{ 变量节点=根， links=d3.layout.tree.linksnodes； //重新启动强制布局。 force.nodesnodes .linkslinks 开始 //更新链接… link=svg.selectAll.link .数据链； //输入任何新链接。 link.enter.insertsvg:line、.node .attr类，链接 .attrx1，函数d{ 返回d.source.x； } .attry1，功能正常{ 返回d.source.y； } .attrx2，函数为{ 返回d.target.x； } .attry2，函数d{ 返回d.target.y； }; //退出所有旧链接。 link.exit.remove； //更新节点… node=svg.selectAll.node .数据节点； //输入任何新节点。 var g=node.enter.appendg .attr类、节点 .onclick，单击 .callforce.drag； g、 附加圆 .attrr，半径； g、 附录文本 .textfunctiond{ 返回d.name； } .attr文本锚定，中间 .attr字体大小，1.8em .attry，5名； //退出所有旧节点。 node.exit.remove； } 功能记号{ link.attrx1，函数d{ 返回d.source.x； } .attry1，功能正常{ 返回d.source.y； } .attrx2，函数为{ 返回d.target.x； } .attry2，函数d{ 返回d.target.y； }; node.attrtransform，函数d{ 返回translate+d.x+，+d.y+； }; } //在单击时切换子项。 功能点击{ 如果你有孩子{ d、 _children=d.children； d、 children=null； }否则{ d、 儿童=d.\U儿童； d、 _children=null； } 使现代化 } //返回根目录下所有节点的列表。 函数根{ 变量节点=[]， i=0； 函数递归节点{ 如果node.children node.size=node.children.reducefunctionp，v{ 返回p+ev； }, 0; 如果！node.id node.id=++i； nodes.pushnode； 返回node.size； } root.size=recurseroot； 返回节点； } 圈{ 光标：指针； 行程：34495e； 笔画宽度：2px； 框大小：边框框； 笔划位置：内侧； } line.link{ 填充：无； 行程：34495e； 笔划宽度：1.5px； } 圈{ 填充物：淡蓝色； 行程：555； 笔画宽度：3px； } 圆叶{ 行程：fff； 笔划宽度：1.5px； } 船体路径{ 填充物：淡蓝色； 填充不透明度：0.3； } line.link{ 中风：333例； 笔划不透明度：0.5； 指针事件：无； } 不能将文本附加到圆元素。使用g元素将它们分组，如中所示。