From a1a5330872a71616979bdb6bff6bef19fff569d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= <fil@rezo.net>
Date: Wed, 23 Dec 2020 17:15:05 +0100
Subject: [PATCH] an heuristic to prevent tick occlusion Related: #72

---
 src/marks/axis.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/marks/axis.js b/src/marks/axis.js
index 6b0bce7fee..85b61d6004 100644
--- a/src/marks/axis.js
+++ b/src/marks/axis.js
@@ -1,3 +1,4 @@
+import {max} from "d3-array";
 import {axisTop, axisBottom, axisRight, axisLeft} from "d3-axis";
 import {interpolateRound} from "d3-interpolate";
 import {create} from "d3-selection";
@@ -53,6 +54,7 @@ export class AxisX {
         .attr("font-size", null)
         .attr("font-family", null)
         .call(g => g.select(".domain").remove())
+        .call(tickOcclusion(width - marginLeft - marginRight, true))
         .call(!grid ? () => {} : g => g.selectAll(".tick line").clone(true)
             .attr("stroke-opacity", 0.1)
             .attr("y2", offsetSign * (marginBottom + marginTop - height)))
@@ -123,6 +125,7 @@ export class AxisY {
         .attr("font-size", null)
         .attr("font-family", null)
         .call(g => g.select(".domain").remove())
+        .call(tickOcclusion(height - marginTop - marginBottom, false))
         .call(!grid ? () => {} : g => g.selectAll(".tick line").clone(true)
             .attr("stroke-opacity", 0.1)
             .attr("x2", offsetSign * (marginLeft + marginRight - width)))
@@ -149,3 +152,16 @@ function round(scale) {
       ? scale.copy().interpolate(interpolateRound)
       : scale;
 }
+
+function tickOcclusion(space, horizontal) {
+  return g => {
+    const tickLabels = g.selectAll(".tick text");
+    const n = tickLabels.size();
+    const M = (.5 + (horizontal ? max(tickLabels, d => d.textContent.length) : 1)) * 6.5;
+    const m = Math.ceil(n * M / space);
+    if (m > 1) {
+      tickLabels.filter((d,i) => i % m).remove();
+      g.selectAll(".tick line").filter((d,i) => i % m).remove();
+    }
+  };
+}