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