阻止 d3 圆形包装标签重叠

Question

卡在重叠的标签上。举例说明：JSFIDDLE

1. 单击文本标签“A 组”。缩放过渡后， A 组标签仍然与小圆圈的标签重叠。
2. 点击其他地方缩小。
3. 再次单击“A 组”。这次标签没有保留，所以 没有重叠。所以它似乎会在一段时间后自行修复。

我不希望在第一次单击某些内容时发生重叠。我该怎么做呢？我不想截断标签或重新定位标签。

我一直在摆弄这一点，但到目前为止没有运气。

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

仅供参考，如果第一次点击是在中等圆圈上，也会发生这种情况。

This post gets close，通过说它可以使用包输出来限制可见性，但没有说明如何实现它。

所以基本上我正在尝试做这样的事情：“如果放大到中等或小圆圈的水平，不要显示中等圆圈标签。”

谢谢。

Answer 1

我也有同样的问题。我发现缩放功能的特定部分，如果在生成初始视图后立即应用于根，可以解决此问题。将此代码添加到 d3.json 文件的末尾应该可以解决问题。仍在研究更好的解决方案。

init(root)
function init(d) {
  var transition = d3.transition()
  transition.selectAll("text")
    .each("start", function(d) {
      if (d.parent === focus) this.style.display = "inline";
    });
}