如何在D3.js网络图的矩形节点中添加并正常显示文本？

问题根因 #

你的代码存在3个核心错误导致节点和文本无法显示：

• join()方法误用：你已经通过enter().append("g")为每个节点创建了分组元素，直接给分组追加矩形即可，使用join("rect")会错误替换现有分组结构，破坏节点的层级逻辑
• 文本回调无返回值：设置文本内容的匿名函数只写了d.label;没有加return，导致文本内容为空
• 缺少元素相对位置调整：未调整矩形、文本和分组的相对位置，即使元素渲染也可能超出可视范围或被遮挡

可直接替换的修改代码段 #

你只需要替换原代码中创建节点、矩形、文本的部分即可，修改后代码如下：

var textNodes= svg.append("g") // 节点分组容器
                .selectAll("g")
                .data(data.nodes)
                .enter().append("g");

// 给每个节点分组追加矩形
var rects= textNodes.append("rect")
                        .attr("width",300)
                        .attr("height",90)
                        // 矩形左上角偏移宽高的一半，让分组坐标对应矩形中心，和连线端点对齐
                        .attr("x", -150)
                        .attr("y", -45)
                        .style("fill", "#69b3a2")
                        .attr("stroke","black");

// 给每个节点分组追加文本
var texts= textNodes.append("text")
    .text(function(d){
        // 补充return返回节点标签内容
        return d.label;
    })
    // 调整文本到矩形中心位置
    .attr("x", 0)
    .attr("y", 0)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle")
    .style("fill", "#000")
    .style("font-size", "14px");

其他说明 #

原有ticked函数中平移整个节点分组的逻辑无需修改，调整后分组的坐标就是矩形的中心，和连线的端点坐标自动对齐，不需要额外修改连线的渲染逻辑。

内容的提问来源于stack exchange，提问作者srisubhashp