Javascript 树形图-防止标签与节点重叠

我在d3（v5）中制作了一个可折叠的树形图，在这里可以找到它的简化版本：

每个节点都有一个标签，但标签仅在有足够空间的地方显示，以便它们不会彼此重叠或过于靠近SVG的边缘。在链接示例中，首次加载时标签仅显示在树形图的前两个深度

requiredSpacing

用于估计需要多少空间，而

minSpacing

检查每个深度节点之间存在的最小间距

以下几行定位节点和标签，具有过渡效果：

var nodeUpdate=nodeEnter.merge(node)
    .transition()
    .duration(function() {
        if (loaded==0) {
            return 0;
        }
        else {
            return duration;
        }
    })
    .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    });

nodeUpdate.select("circle")
    .attr("r", function(d) {
        return radiuses[d.depth];
    })
    .attr("class", function(d) {
        if (d._children) {
            return "filled";
        } else {
            return "unfilled";
        }
    });

nodeUpdate.select("text")
    .style("fill-opacity", function(d) {
        if (minSpacing[d.depth]<requiredSpacing[d.depth]*2 || (d.data.position=='left' && Math.ceil(d.x/5)*5-radiuses[d.depth]-requiredSpacing[d.depth]<margin.left) || (d.data.position=='right' && Math.ceil(d.x/5)*5+radiuses[d.depth]+requiredSpacing[d.depth]>width)) {
            return 1e-6;
        }
        else {
            return 1;
        }
    })
    .attr("class", function(d) {
        if (minSpacing[d.depth]<requiredSpacing[d.depth]*2 || (d.data.position=='left' && Math.ceil(d.x/5)*5-radiuses[d.depth]-requiredSpacing[d.depth]<margin.left) || (d.data.position=='right' && Math.ceil(d.x/5)*5+radiuses[d.depth]+requiredSpacing[d.depth]>width)) {
            return "nodeLabel nonselectable";
        }
        else {
            return "nodeLabel";
        }
    })

或者有另一种更好的方法来解决这个问题

---

我应该怎么做？

只需设置一个

指针事件：无到这些标签：

.nonselectable {
    pointer-events: none;
    etc...
}

实际上，因为我看到标签是不可点击的，所以可以设置
指针事件：none至全部

以下是更新后的JSFidle：

.nonselectable {
    pointer-events: none;
    etc...
}