d3オートスペース重複ダニラベル

Question

重複するダニラベルを引き出さない方法はありますか？たとえば、棒グラフを使用していても、バーの幅が5ピクセルで、ラベルの幅が10ピクセルの場合、混雑してしまいます。私は現在、重複していないときだけラベルを描画する実装に取り​​組んでいます。私はそれを行う既存の方法を見つけることができませんが、他の誰かがこの問題に対処していたかどうかは分かりませんでした。

Answer 1

D3でこれを自動的に行う方法はありません。ティック数またはティック値を明示的に設定することができます（the documentation参照）が、それぞれの数値/値を自分で把握する必要があります。もう1つの選択肢は、重なり合う機会が少なくなるようにラベルを回転させることです。

また、他の答えで示唆されているように、ラベルを配置するために強制レイアウトを試すこともできます。明確にするために、ラベルにのみ強制レイアウトを使用します。これは、チャートのタイプとは完全に独立しています。私はthis exampleでこれを行いましたが、これは他の答えにリンクされているものよりも少し関連性があります。

フォースレイアウトソリューションを使用する場合は、ラベルの位置をアニメートする必要はありません。収束するまで力のレイアウトを計算し、ラベルをプロットするだけです。

Answer 2

thisスレッドで、特にthis exampleに記載されているものを試してみると、ラベルが上/下/外側に押し込まれ、すべてが収まるようになります。これには、別々の力を使用する必要があります。ラベルそのもののためにもう一つ。

Answer 3

私はいくつかの状況（画面の幅にもよる）で縦軸と最後のティックが重なる複数（サブ）軸で同様の問題を抱えていました。テキストラベルの終わりの位置を次の軸の位置で置き換えます。このコードは、私のユースケースに非常に具体的であるが、あなたのニーズに容易に適合できます。

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'); 
    } 

}); 

ザ・はcolor: aquaに隠されたものをしているダニ：私は力のレイアウトを使用していない