javascript - 树形图——防止标签重叠节点

Question

我在 d3 (v5) 中制作了一个可折叠的树形图，可以在此处找到其简化版本:https://jsfiddle.net/philipnye/cwj9nkhr/ .

每个节点都有一个标签，但标签只显示在有足够空间的地方，不会相互重叠或太靠近 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";
        }
    })

我将没有空间显示的标签的不透明度设置为 1e-6(以启用转换)并给它们一个 nonselectable 类，这意味着标签不能选择。但我实际上并没有删除它们 - 然后我遇到了问题，在某些情况下它们会重叠节点并且意味着无法单击节点以展开/折叠该点下方的树。查看比标记为 Male 和 Female 的节点深两层或三层的节点 - 只有三分之一到一半的节点可以单击。 (请注意，底部 层中的节点不可展开/折叠，因为它们没有子节点。)

我如何最好地删除这些标签，或者至少阻止它们阻止您点击节点？

我考虑过的事情:

• 更改绘制顺序可能会将标签“置于”节点 - 但我认为这将涉及对代码，我不知道怎么做
• 大概有可能随后遍历并删除具有 nonselectable 的节点类，但这并不是最有效的方法，我已经在尝试实现时遇到了一些困难
• 我想将标签转移到svg 尺寸之外的某个地方可能会起作用 - 虽然我是不确定我将如何通过过渡来处理这个问题，所以它不是被用户看到
• 将 font-size 设置为接近于零。我试过了将类似下面的代码添加到我的 nodeUpdate 代码中，但它似乎会导致转换出现问题

.attr("font-size", 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 '0.1em';
    }
})

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

我应该怎么做？

Answer 1

只需为这些标签设置一个pointer-events: none;:

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

实际上，由于我看到标签不可点击，您可以将 pointer-events: none; 设置为 all。

这是更新后的 JSFidle:https://jsfiddle.net/e3j7ta4y/