D3.js圆打包图：过渡时保留叶子节点父文本及更新特定类文本样式

我正在学习JavaScript和D3.js，现有一个可缩放的圆打包图，默认缩放时父节点文本会消失，仅当前层级节点文本显示。

数据结构 #

• 根节点：类为circle.node.node--root，无名称
• 中间节点：类为circle.node，包含“Animal tissue”“Water”“Soil/sediment”三个节点
• 叶子节点：橙色，类为circle.node.node--leaf

问题需求 #

希望完全缩放至橙色叶子节点（对应数据height=0）时，其父节点文本保持可见。修改过渡函数条件后，仅在先缩放至height=0节点时生效，原始过渡代码如下：

transition.selectAll("text")
    .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
    .style("fill-opacity", function(d) { 
        if ((d.parent === focus)) {
            return 1
        } else {
            return 0
        }
    })
    .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
    .on("end", function(d) { 
        if ((d.parent !== focus)) {
            this.style.display = "none"
        } 
    });

后续我将最低层级文本设为.labelLow类，其他文本为.label类，尝试用d3.selectAll修改.labelLow样式时，整个图形被移除，修改后的代码如下：

transition.selectAll("text")
            .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
            .style("fill-opacity", function(d) { 
                if ((d.parent === focus) || (focus.height === 0)) {
                    return 1
                } else {
                    return 0
                }})
            .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
            .on("end", function(d) { 
                if ((d.parent !== focus) && (focus.height !== 0)) {
                    this.style.display = "none"
                } if (focus.height === 0) {
                    // my attempt at updating the style of a specific class
                    d3.selectAll(".labelLow")
                        .style("display", "inline")

                    this.parentNode.style.display = "none"
                }
            })

寻求解决以上问题的方法。

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