7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-04-11

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

image.png

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

解法をサーベイ

version3用

整列させることで解決

衝突判定で解決

version 4以上用

整列させることで解決

衝突判定で解決

採用した解法

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

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?