d3自動空間重疊刻度標籤

Question

d3中有沒有繪製重疊刻度標籤的方法？例如，如果我有條形圖，但條形寬度僅爲5個像素，標籤寬度爲10個像素，則最終會出現雜亂無章的混亂。我目前正在研究一個實現，只在不重疊的時候繪製標籤。我找不到任何現有的方法來做到這一點，但不知道是否有其他人處理過這個問題。

Answer 1

在D3中沒有辦法自動做到這一點。您可以明確設置刻度或刻度值（請參閱the documentation），但您必須自己計算出相應的數值/值。另一種選擇是旋轉標籤，以減少重疊的機會。

或者，像其他答案中的建議一樣，您可以嘗試使用強制佈局來放置標籤。爲了澄清，你只能在標籤上使用強制佈局 - 這完全獨立於圖表的類型。我在this example中這樣做了，這比在另一個答案中鏈接的那個稍有關聯。

請注意，如果您使用強制佈局解決方案，則不必爲標籤的位置設置動畫。您可以簡單地計算力佈局，直到它收斂，然後繪製標籤。

Answer 2

可以嘗試在this線程提到的某些東西，特別是this example從而使標籤被推上/下/出，使它們都可以安裝的方式，這需要使用一個單獨的力量，一個用於節點和另一個是標籤本身。

Answer 3

我有一個類似的問題，多個（子）軸，其中最後一個刻度重疊我的垂直軸在某些情況下（取決於屏幕寬度），所以我剛剛寫了一個小函數，比較文本標籤末尾的位置與下一個軸的位置。此代碼是非常具體的，以我的使用情況，但可以很容易地適應您的需求：與color: aqua

var $svg = $('#svg'); 

// get the last tick of each of my sub-axis 
$('.tick-axis').find('.tick:last-of-type').each(function() { 

    // get position of the end of this text field 
    var endOfTextField = $(this).offset().left + $(this).find('text').width(); 

    // get the next vertical axis 
    var $nextAxis = $('line[data-axis="' + $(this).closest('.tick-axis').attr('data-axis') + '"]'); 

    // there is no axis on the very right, so just use the svg width 
    var positionOfAxis = ($nextAxis.length > 0) ? $nextAxis.offset().left : $svg.offset().left + $svg.width(); 

    // hide the ugly ones! 
    if (endOfTextField > positionOfAxis) { 
    $(this).attr('class', 'tick hide'); 
    } 

}); 

蜱是隱藏的：