Edited at

D3.jsでのラベルの重なり防止

ここではラベルとは、データを表現した幾何図形に添えられた、補足のためにデータ値を記述したテキストのことを指すものとします。一律に配置した際に位置や文字数によってはテキスト同士が重なってしまい、可読性が落ちてしまう問題を解決したい。

https://medium.com/@adarshlilha/removing-label-overlapping-from-pretty-charts-8dd2e3581b71 からの引用


解法をサーベイ


version3用


整列させることで解決


衝突判定で解決


version 4以上用


整列させることで解決


衝突判定で解決


採用した解法

ペーパーがあって使い勝手もシンプルなD3-Labelerをversion 4用に書き直してあるAdarsh Lilhaさんのコード使わせてもらいました。あざす。