停止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"; 
    }); 
}