smart-labels 0.0.2 → 0.0.4

package/dist/smartLabels.es.js

@@ -1,4 +1,4 @@
-// smart-labels v0.0.1 Copyright (c) 2024 John Alexis Guerra Gómez
+// smart-labels v0.0.3 Copyright (c) 2024 John Alexis Guerra Gómez
 import * as d3 from 'd3';
 
 // Based on https://observablehq.com/@d3/voronoi-labels by Mike Bostock
@@ -22,6 +22,7 @@ function smartLabels(
   {
     x = (d) => d[0], // x coordinate accessor, expected to be in pixels
     y = (d) => d[1], // y coordinate accessor, expected to be in pixels
+    r = () => 3, // radius accessor, expected to be in pixels
     label = (d, i) => i, // Accessor for the label
     fill = "#333", // label fill color
     stroke = "white", // label stroke color
@@ -55,11 +56,16 @@ function smartLabels(
     pointsStroke = "#ccc",
     renderer = "svg",
     debug = false,
+    selected = null,
+    padding = 3, // label padding in pixels
   } = {}
 ) {
   data = data.filter(
-    (d) =>
-      x(d) !== undefined && x(d) !== null && y(d) !== undefined && y(d) !== null
+    (d, index) =>
+      x(d, index) !== undefined &&
+      x(d, index) !== null &&
+      y(d, index) !== undefined &&
+      y(d, index) !== null
   );
 
   let xExtent = d3.extent(data, x),
@@ -68,12 +74,37 @@ function smartLabels(
   height = height || yExtent[1] - yExtent[0];
 
   if (debug) console.log("✅ smartLabels renderer", renderer);
+
+  function checkIfTargetMatchesRenderer(target, renderer) {
+    if (target && target.node) {
+      target = target.node();
+    }
+    if (renderer.toLocaleLowerCase() === "canvas") {
+      return target instanceof HTMLCanvasElement;
+    } else {
+      return target instanceof SVGElement;
+    }
+  }
+
+  if (!checkIfTargetMatchesRenderer(target, renderer)) {
+    if (debug) console.log("❌ smartLabels Target doesn't match the renderer", target, renderer);
+    throw new Error("Smartlabels Target doesn't match the renderer", target, renderer);
+  }
+
+  // Try to reuse the target
   if (renderer.toLocaleLowerCase() === "canvas") {
-    target =
-      d3.select(target) ||
-      d3.create("canvas").attr("width", width).attr("height", height);
+    if (target) {
+      target = d3.select(target.node ? target.node() : target);
+    } else {
+      target = d3.create("canvas").attr("width", width).attr("height", height);
+    }
     useOcclusion = false;
   } else {
+    if (target) {
+      target = d3.select(target.node ? target.node() : target);
+    } else {
+      target = d3.create("svg").attr("viewBox", [0, 0, width, height]);
+    }
     target = target || d3.create("svg").attr("viewBox", [0, 0, width, height]);
   }
 
@@ -88,16 +119,16 @@ function smartLabels(
   let cells = data.map((d, i) => [d, voronoi.cellPolygon(i)]);
   // Replace null cells with the nearest one
   cells = cells
-    .map(([d, cell]) => [d, getNearestCell(d, cell)])
+    .map(([d, cell], index) => [d, getNearestCell(d, cell, index)])
     .map(([d, cell]) => ({ d, cell, show: -d3.polygonArea(cell) > threshold }));
 
   // cells can be null when we have duplicated coords
   // https://github.com/d3/d3-delaunay/issues/106
-  function getNearestCell(d, cell) {
+  function getNearestCell(d, cell, index) {
     if (!cell) {
-      const i = delaunay.find(x(d), y(d));
+      const i = delaunay.find(x(d, index), y(d, index));
       if (i === -1) {
-        console.log("couldn't find cell", i, d, x(d), y(d));
+        console.log("couldn't find cell", i, d, x(d, index), y(d, index));
         return null;
       }
       cell = cells[i][1];
@@ -128,13 +159,25 @@ function smartLabels(
       .attr("stroke", "none");
 
     const orient = {
-      top: (text) => text.attr("text-anchor", "middle").attr("y", -6),
+      top: (text) =>
+        text
+          .attr("text-anchor", "middle")
+          .attr("y", (d, i) => -(r(d, i) + padding)),
       right: (text) =>
-        text.attr("text-anchor", "start").attr("dy", "0.35em").attr("x", 6),
+        text
+          .attr("text-anchor", "start")
+          .attr("dy", "0.35em")
+          .attr("x", (d, i) => r(d, i) + padding),
       bottom: (text) =>
-        text.attr("text-anchor", "middle").attr("dy", "0.71em").attr("y", 6),
+        text
+          .attr("text-anchor", "middle")
+          .attr("dy", "0.71em")
+          .attr("y", (d, i) => r(d, i) + padding),
       left: (text) =>
-        text.attr("text-anchor", "end").attr("dy", "0.35em").attr("x", -6),
+        text
+          .attr("text-anchor", "end")
+          .attr("dy", "0.35em")
+          .attr("x", (d, i) => -(r(d, i) + padding)),
     };
 
     if (showAnchors || labelsInCentroids) {
@@ -151,8 +194,10 @@ function smartLabels(
         .join("path")
         .attr("class", "anchor")
         .attr("display", ({ show }) => (show ? null : "none"))
-        .attr("d", ({ d, cell }) =>
-          cell ? `M${d3.polygonCentroid(cell)}L${x(d)},${y(d)}` : null
+        .attr("d", ({ d, cell }, index) =>
+          cell
+            ? `M${d3.polygonCentroid(cell)}L${x(d, index)},${y(d, index)}`
+            : null
         );
     }
 
@@ -195,11 +240,14 @@ function smartLabels(
       .data((d) => d)
       .join("text")
       .style("font", font)
-      .each(function ({ d, cell }) {
+      .each(function ({ d, cell }, index) {
         if (!cell) return;
         const [cx, cy] = d3.polygonCentroid(cell);
         const angle =
-          (Math.round((Math.atan2(cy - y(d), cx - x(d)) / Math.PI) * 2) + 4) %
+          (Math.round(
+            (Math.atan2(cy - y(d, index), cx - x(d, index)) / Math.PI) * 2
+          ) +
+            4) %
           4;
 
         d3.select(this).call(
@@ -212,13 +260,13 @@ function smartLabels(
                 : orient.left
         );
       })
-      .attr("transform", ({ d, cell }) => {
+      .attr("transform", ({ d, cell }, index) => {
         if (labelsInCentroids) {
           const [cx, cy] = d3.polygonCentroid(cell);
 
           return `translate(${cx}, ${cy})`;
         } else {
-          return `translate(${x(d)}, ${y(d)})`;
+          return `translate(${x(d, index)}, ${y(d, index)})`;
         }
       })
       .attr("display", ({ show }) => (show ? null : "none"))
@@ -278,20 +326,26 @@ function smartLabels(
     }
   } // renderSVG
 
-  function renderCanvas() {
-    const context = target.node().getContext("2d");
-    // const ratio = window.devicePixelRatio || 1;
-    // target.attr("width", width * ratio).attr("height", height * ratio);
-    // context.scale(ratio, ratio);
-    // context.clearRect(0, 0, width, height);
-
+  function renderCanvasAnchorsVoronoiPoints(context) {
+    if (debug)
+      console.log(
+        "renderCanvasAnchorsVoronoiPoints",
+        "showAnchors",
+        showAnchors,
+        "labelsInCentroids",
+        labelsInCentroids,
+        "showVoronoi",
+        showVoronoi,
+        "showPoints",
+        showPoints
+      );
     if (showAnchors || labelsInCentroids) {
-      cells.forEach(({ d, cell, show }) => {
+      cells.forEach(({ d, cell, show }, index) => {
         if (!show) return;
         const [cx, cy] = d3.polygonCentroid(cell);
         context.beginPath();
         context.moveTo(cx, cy);
-        context.lineTo(x(d), y(d));
+        context.lineTo(x(d, index), y(d, index));
         context.strokeStyle = anchorsStroke;
         context.stroke();
       });
@@ -306,23 +360,40 @@ function smartLabels(
 
     if (showPoints) {
       context.beginPath();
-      delaunay.renderPoints(context, 2);
+      // delaunay.renderPoints(context, 2);
+      context.save();
+      context.globalAlpha = 0.7;
+      context.fillStyle = "black";
+      data.forEach((d, i) => {
+        context.beginPath();
+        context.arc(x(d, i), y(d, i), r(d, i), 0, 2 * Math.PI);
+      });
+      context.restore();
       context.fillStyle = pointsFill;
       context.fill();
       context.strokeStyle = pointsStroke;
       context.stroke();
     }
+  } // renderCanvasAnchorsVoronoiPoints
 
-    cells.forEach(({ d, cell, show }) => {
-      if (!show) return;
+  function renderCanvasLabels(context, selected) {
+    cells.forEach(({ d, cell, show }, index) => {
+      if (!show && index !== selected) return;
       const [cx, cy] = d3.polygonCentroid(cell);
       const angle =
-        (Math.round((Math.atan2(cy - y(d), cx - x(d)) / Math.PI) * 2) + 4) % 4;
+        (Math.round(
+          (Math.atan2(cy - y(d, index), cx - x(d, index)) / Math.PI) * 2
+        ) +
+          4) %
+        4;
 
       context.save();
+      const dr = r(d, index) + padding;
+      const dx = angle === 0 ? dr : angle === 2 ? -dr : dr;
+      const dy = angle === 1 ? dr : angle === 3 ? -dr : dr;
       context.translate(
-        labelsInCentroids ? cx : x(d),
-        labelsInCentroids ? cy : y(d)
+        labelsInCentroids ? cx : x(d, index) + dx,
+        labelsInCentroids ? cy : y(d, index) + dy
       );
       context.textAlign =
         angle === 0
@@ -340,16 +411,23 @@ function smartLabels(
             : angle === 2
               ? "middle"
               : "bottom";
-      context.font = font;
+      context.font = index === selected ? hoverFont : font;
       context.fillStyle = fill;
       context.strokeStyle = stroke;
       context.lineWidth = strokeWidth;
-      context.strokeText(label(d), 0, 0);
-      context.fillText(label(d), 0, 0);
+      // if (debug) console.log(index, dx, dy, angle);
+      context.strokeText(label(d, index), 0, 0);
+      context.fillText(label(d, index), 0, 0);
       context.restore();
     });
+  } // renderCanvasLabels
+
+  function renderCanvas() {
+    const context = target.node().getContext("2d");
+
+    renderCanvasAnchorsVoronoiPoints(context);
+    renderCanvasLabels(context, selected);
 
-    let selected = null;
     if (hover) {
       if (debug) console.log("setting onmousemove", target);
 
@@ -360,44 +438,9 @@ function smartLabels(
         selected = i;
 
         context.clearRect(0, 0, width, height);
-        cells.forEach(({ d, cell, show }, index) => {
-          if (!show && index !== selected) return;
-          const [cx, cy] = d3.polygonCentroid(cell);
-          const angle =
-            (Math.round((Math.atan2(cy - y(d), cx - x(d)) / Math.PI) * 2) + 4) %
-            4;
-
-          context.save();
-          context.translate(
-            labelsInCentroids ? cx : x(d),
-            labelsInCentroids ? cy : y(d)
-          );
-          context.textAlign =
-            angle === 0
-              ? "left"
-              : angle === 1
-                ? "center"
-                : angle === 2
-                  ? "right"
-                  : "center";
-          context.textBaseline =
-            angle === 0
-              ? "middle"
-              : angle === 1
-                ? "top"
-                : angle === 2
-                  ? "middle"
-                  : "bottom";
-          context.font = index === selected ? hoverFont : font;
-          context.fillStyle = fill;
-          context.strokeStyle = stroke;
-          context.lineWidth = strokeWidth;
-          context.strokeText(label(d), 0, 0);
-          context.fillText(label(d), 0, 0);
-          context.restore();
-        });
-
+        renderCanvasAnchorsVoronoiPoints(context);
         if (onHover && typeof onHover === "function") onHover(i);
+        renderCanvasLabels(context, selected);
       });
     }
   } // renderCanvas

package/dist/smartLabels.js

@@ -1,4 +1,4 @@
-// smart-labels v0.0.1 Copyright (c) 2024 John Alexis Guerra Gómez
+// smart-labels v0.0.3 Copyright (c) 2024 John Alexis Guerra Gómez
 (function (global, factory) {
 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('d3')) :
 typeof define === 'function' && define.amd ? define(['d3'], factory) :
@@ -45,6 +45,7 @@ function smartLabels(
   {
     x = (d) => d[0], // x coordinate accessor, expected to be in pixels
     y = (d) => d[1], // y coordinate accessor, expected to be in pixels
+    r = () => 3, // radius accessor, expected to be in pixels
     label = (d, i) => i, // Accessor for the label
     fill = "#333", // label fill color
     stroke = "white", // label stroke color
@@ -78,11 +79,16 @@ function smartLabels(
     pointsStroke = "#ccc",
     renderer = "svg",
     debug = false,
+    selected = null,
+    padding = 3, // label padding in pixels
   } = {}
 ) {
   data = data.filter(
-    (d) =>
-      x(d) !== undefined && x(d) !== null && y(d) !== undefined && y(d) !== null
+    (d, index) =>
+      x(d, index) !== undefined &&
+      x(d, index) !== null &&
+      y(d, index) !== undefined &&
+      y(d, index) !== null
   );
 
   let xExtent = d3__namespace.extent(data, x),
@@ -91,12 +97,37 @@ function smartLabels(
   height = height || yExtent[1] - yExtent[0];
 
   if (debug) console.log("✅ smartLabels renderer", renderer);
+
+  function checkIfTargetMatchesRenderer(target, renderer) {
+    if (target && target.node) {
+      target = target.node();
+    }
+    if (renderer.toLocaleLowerCase() === "canvas") {
+      return target instanceof HTMLCanvasElement;
+    } else {
+      return target instanceof SVGElement;
+    }
+  }
+
+  if (!checkIfTargetMatchesRenderer(target, renderer)) {
+    if (debug) console.log("❌ smartLabels Target doesn't match the renderer", target, renderer);
+    throw new Error("Smartlabels Target doesn't match the renderer", target, renderer);
+  }
+
+  // Try to reuse the target
   if (renderer.toLocaleLowerCase() === "canvas") {
-    target =
-      d3__namespace.select(target) ||
-      d3__namespace.create("canvas").attr("width", width).attr("height", height);
+    if (target) {
+      target = d3__namespace.select(target.node ? target.node() : target);
+    } else {
+      target = d3__namespace.create("canvas").attr("width", width).attr("height", height);
+    }
     useOcclusion = false;
   } else {
+    if (target) {
+      target = d3__namespace.select(target.node ? target.node() : target);
+    } else {
+      target = d3__namespace.create("svg").attr("viewBox", [0, 0, width, height]);
+    }
     target = target || d3__namespace.create("svg").attr("viewBox", [0, 0, width, height]);
   }
 
@@ -111,16 +142,16 @@ function smartLabels(
   let cells = data.map((d, i) => [d, voronoi.cellPolygon(i)]);
   // Replace null cells with the nearest one
   cells = cells
-    .map(([d, cell]) => [d, getNearestCell(d, cell)])
+    .map(([d, cell], index) => [d, getNearestCell(d, cell, index)])
     .map(([d, cell]) => ({ d, cell, show: -d3__namespace.polygonArea(cell) > threshold }));
 
   // cells can be null when we have duplicated coords
   // https://github.com/d3/d3-delaunay/issues/106
-  function getNearestCell(d, cell) {
+  function getNearestCell(d, cell, index) {
     if (!cell) {
-      const i = delaunay.find(x(d), y(d));
+      const i = delaunay.find(x(d, index), y(d, index));
       if (i === -1) {
-        console.log("couldn't find cell", i, d, x(d), y(d));
+        console.log("couldn't find cell", i, d, x(d, index), y(d, index));
         return null;
       }
       cell = cells[i][1];
@@ -151,13 +182,25 @@ function smartLabels(
       .attr("stroke", "none");
 
     const orient = {
-      top: (text) => text.attr("text-anchor", "middle").attr("y", -6),
+      top: (text) =>
+        text
+          .attr("text-anchor", "middle")
+          .attr("y", (d, i) => -(r(d, i) + padding)),
       right: (text) =>
-        text.attr("text-anchor", "start").attr("dy", "0.35em").attr("x", 6),
+        text
+          .attr("text-anchor", "start")
+          .attr("dy", "0.35em")
+          .attr("x", (d, i) => r(d, i) + padding),
       bottom: (text) =>
-        text.attr("text-anchor", "middle").attr("dy", "0.71em").attr("y", 6),
+        text
+          .attr("text-anchor", "middle")
+          .attr("dy", "0.71em")
+          .attr("y", (d, i) => r(d, i) + padding),
       left: (text) =>
-        text.attr("text-anchor", "end").attr("dy", "0.35em").attr("x", -6),
+        text
+          .attr("text-anchor", "end")
+          .attr("dy", "0.35em")
+          .attr("x", (d, i) => -(r(d, i) + padding)),
     };
 
     if (showAnchors || labelsInCentroids) {
@@ -174,8 +217,10 @@ function smartLabels(
         .join("path")
         .attr("class", "anchor")
         .attr("display", ({ show }) => (show ? null : "none"))
-        .attr("d", ({ d, cell }) =>
-          cell ? `M${d3__namespace.polygonCentroid(cell)}L${x(d)},${y(d)}` : null
+        .attr("d", ({ d, cell }, index) =>
+          cell
+            ? `M${d3__namespace.polygonCentroid(cell)}L${x(d, index)},${y(d, index)}`
+            : null
         );
     }
 
@@ -218,11 +263,14 @@ function smartLabels(
       .data((d) => d)
       .join("text")
       .style("font", font)
-      .each(function ({ d, cell }) {
+      .each(function ({ d, cell }, index) {
         if (!cell) return;
         const [cx, cy] = d3__namespace.polygonCentroid(cell);
         const angle =
-          (Math.round((Math.atan2(cy - y(d), cx - x(d)) / Math.PI) * 2) + 4) %
+          (Math.round(
+            (Math.atan2(cy - y(d, index), cx - x(d, index)) / Math.PI) * 2
+          ) +
+            4) %
           4;
 
         d3__namespace.select(this).call(
@@ -235,13 +283,13 @@ function smartLabels(
                 : orient.left
         );
       })
-      .attr("transform", ({ d, cell }) => {
+      .attr("transform", ({ d, cell }, index) => {
         if (labelsInCentroids) {
           const [cx, cy] = d3__namespace.polygonCentroid(cell);
 
           return `translate(${cx}, ${cy})`;
         } else {
-          return `translate(${x(d)}, ${y(d)})`;
+          return `translate(${x(d, index)}, ${y(d, index)})`;
         }
       })
       .attr("display", ({ show }) => (show ? null : "none"))
@@ -301,20 +349,26 @@ function smartLabels(
     }
   } // renderSVG
 
-  function renderCanvas() {
-    const context = target.node().getContext("2d");
-    // const ratio = window.devicePixelRatio || 1;
-    // target.attr("width", width * ratio).attr("height", height * ratio);
-    // context.scale(ratio, ratio);
-    // context.clearRect(0, 0, width, height);
-
+  function renderCanvasAnchorsVoronoiPoints(context) {
+    if (debug)
+      console.log(
+        "renderCanvasAnchorsVoronoiPoints",
+        "showAnchors",
+        showAnchors,
+        "labelsInCentroids",
+        labelsInCentroids,
+        "showVoronoi",
+        showVoronoi,
+        "showPoints",
+        showPoints
+      );
     if (showAnchors || labelsInCentroids) {
-      cells.forEach(({ d, cell, show }) => {
+      cells.forEach(({ d, cell, show }, index) => {
         if (!show) return;
         const [cx, cy] = d3__namespace.polygonCentroid(cell);
         context.beginPath();
         context.moveTo(cx, cy);
-        context.lineTo(x(d), y(d));
+        context.lineTo(x(d, index), y(d, index));
         context.strokeStyle = anchorsStroke;
         context.stroke();
       });
@@ -329,23 +383,40 @@ function smartLabels(
 
     if (showPoints) {
       context.beginPath();
-      delaunay.renderPoints(context, 2);
+      // delaunay.renderPoints(context, 2);
+      context.save();
+      context.globalAlpha = 0.7;
+      context.fillStyle = "black";
+      data.forEach((d, i) => {
+        context.beginPath();
+        context.arc(x(d, i), y(d, i), r(d, i), 0, 2 * Math.PI);
+      });
+      context.restore();
       context.fillStyle = pointsFill;
       context.fill();
       context.strokeStyle = pointsStroke;
       context.stroke();
     }
+  } // renderCanvasAnchorsVoronoiPoints
 
-    cells.forEach(({ d, cell, show }) => {
-      if (!show) return;
+  function renderCanvasLabels(context, selected) {
+    cells.forEach(({ d, cell, show }, index) => {
+      if (!show && index !== selected) return;
       const [cx, cy] = d3__namespace.polygonCentroid(cell);
       const angle =
-        (Math.round((Math.atan2(cy - y(d), cx - x(d)) / Math.PI) * 2) + 4) % 4;
+        (Math.round(
+          (Math.atan2(cy - y(d, index), cx - x(d, index)) / Math.PI) * 2
+        ) +
+          4) %
+        4;
 
       context.save();
+      const dr = r(d, index) + padding;
+      const dx = angle === 0 ? dr : angle === 2 ? -dr : dr;
+      const dy = angle === 1 ? dr : angle === 3 ? -dr : dr;
       context.translate(
-        labelsInCentroids ? cx : x(d),
-        labelsInCentroids ? cy : y(d)
+        labelsInCentroids ? cx : x(d, index) + dx,
+        labelsInCentroids ? cy : y(d, index) + dy
       );
       context.textAlign =
         angle === 0
@@ -363,16 +434,23 @@ function smartLabels(
             : angle === 2
               ? "middle"
               : "bottom";
-      context.font = font;
+      context.font = index === selected ? hoverFont : font;
       context.fillStyle = fill;
       context.strokeStyle = stroke;
       context.lineWidth = strokeWidth;
-      context.strokeText(label(d), 0, 0);
-      context.fillText(label(d), 0, 0);
+      // if (debug) console.log(index, dx, dy, angle);
+      context.strokeText(label(d, index), 0, 0);
+      context.fillText(label(d, index), 0, 0);
       context.restore();
     });
+  } // renderCanvasLabels
+
+  function renderCanvas() {
+    const context = target.node().getContext("2d");
+
+    renderCanvasAnchorsVoronoiPoints(context);
+    renderCanvasLabels(context, selected);
 
-    let selected = null;
     if (hover) {
       if (debug) console.log("setting onmousemove", target);
 
@@ -383,44 +461,9 @@ function smartLabels(
         selected = i;
 
         context.clearRect(0, 0, width, height);
-        cells.forEach(({ d, cell, show }, index) => {
-          if (!show && index !== selected) return;
-          const [cx, cy] = d3__namespace.polygonCentroid(cell);
-          const angle =
-            (Math.round((Math.atan2(cy - y(d), cx - x(d)) / Math.PI) * 2) + 4) %
-            4;
-
-          context.save();
-          context.translate(
-            labelsInCentroids ? cx : x(d),
-            labelsInCentroids ? cy : y(d)
-          );
-          context.textAlign =
-            angle === 0
-              ? "left"
-              : angle === 1
-                ? "center"
-                : angle === 2
-                  ? "right"
-                  : "center";
-          context.textBaseline =
-            angle === 0
-              ? "middle"
-              : angle === 1
-                ? "top"
-                : angle === 2
-                  ? "middle"
-                  : "bottom";
-          context.font = index === selected ? hoverFont : font;
-          context.fillStyle = fill;
-          context.strokeStyle = stroke;
-          context.lineWidth = strokeWidth;
-          context.strokeText(label(d), 0, 0);
-          context.fillText(label(d), 0, 0);
-          context.restore();
-        });
-
+        renderCanvasAnchorsVoronoiPoints(context);
         if (onHover && typeof onHover === "function") onHover(i);
+        renderCanvasLabels(context, selected);
       });
     }
   } // renderCanvas

package/dist/smartLabels.min.js

@@ -1,2 +1,2 @@
-// smart-labels v0.0.1 Copyright (c) 2024 John Alexis Guerra Gómez
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("d3")):"function"==typeof define&&define.amd?define(["d3"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).smartLabels=e(t.d3)}(this,(function(t){"use strict";function e(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,n.get?n:{enumerable:!0,get:function(){return t[o]}})}})),e.default=t,Object.freeze(e)}var o=e(t);function n(t,e="text"){const n=o.sort(t.selectAll(e),(t=>+t.getAttribute("data-priority"))).reverse().map((t=>{const{x:e,y:o,width:n,height:r}=t.getBoundingClientRect();return{node:t,x:e,y:o,width:n,height:r}})),r=[];for(const t of n){const e=r.some((e=>{return n=e,!((o=t).x+o.width<n.x||n.x+n.width<o.x||o.y+o.height<n.y||n.y+n.height<o.y);var o,n}));o.select(t.node).classed("occluded",e),e||r.push(t)}return r}return function(t,{x:e=t=>t[0],y:r=t=>t[1],label:l=(t,e)=>e,fill:a="#333",stroke:s="white",threshold:i=2e3,width:c=null,height:d=null,target:h=null,font:f="10px sans-serif",hover:u=!0,onHover:p=t=>t,hoverFont:g="bolder 12px sans-serif",labelsInCentroids:y=!0,backgroundFill:m="#fefefe01",strokeWidth:b=5,showVoronoi:x=!1,voronoiStroke:v="#ccc",showAnchors:k=!1,anchorsStroke:w="orange",anchorsFill:j="none",useOcclusion:A=!0,occludedStyle:S="opacity: 0.2",showPoints:L=!1,pointsFill:P="#ccc",pointsSelectedFill:C="firebrick",pointsStroke:M="#ccc",renderer:O="svg",debug:T=!1}={}){t=t.filter((t=>void 0!==e(t)&&null!==e(t)&&void 0!==r(t)&&null!==r(t)));let $=o.extent(t,e),F=o.extent(t,r);c=c||$[1]-$[0],d=d||F[1]-F[0],T&&console.log("✅ smartLabels renderer",O),"canvas"===O.toLocaleLowerCase()?(h=o.select(h)||o.create("canvas").attr("width",c).attr("height",d),A=!1):h=h||o.create("svg").attr("viewBox",[0,0,c,d]);const B=o.Delaunay.from(t,e,r),E=B.voronoi([$[0]-1,F[0]-1,$[1]+1,F[1]+1]);let I=t.map(((t,e)=>[t,E.cellPolygon(e)]));function D(t,o){if(!o){const n=B.find(e(t),r(t));if(-1===n)return console.log("couldn't find cell",n,t,e(t),r(t)),null;o=I[n][1]}return o}return I=I.map((([t,e])=>[t,D(t,e)])).map((([t,e])=>({d:t,cell:e,show:-o.polygonArea(e)>i}))),"canvas"===O.toLocaleLowerCase()?function(){const t=h.node().getContext("2d");(k||y)&&I.forEach((({d:n,cell:l,show:a})=>{if(!a)return;const[s,i]=o.polygonCentroid(l);t.beginPath(),t.moveTo(s,i),t.lineTo(e(n),r(n)),t.strokeStyle=w,t.stroke()})),x&&(t.beginPath(),E.render(t),t.strokeStyle=v,t.stroke()),L&&(t.beginPath(),B.renderPoints(t,2),t.fillStyle=P,t.fill(),t.strokeStyle=M,t.stroke()),I.forEach((({d:n,cell:i,show:c})=>{if(!c)return;const[d,h]=o.polygonCentroid(i),u=(Math.round(Math.atan2(h-r(n),d-e(n))/Math.PI*2)+4)%4;t.save(),t.translate(y?d:e(n),y?h:r(n)),t.textAlign=0===u?"left":1===u?"center":2===u?"right":"center",t.textBaseline=0===u?"middle":1===u?"top":2===u?"middle":"bottom",t.font=f,t.fillStyle=a,t.strokeStyle=s,t.lineWidth=b,t.strokeText(l(n),0,0),t.fillText(l(n),0,0),t.restore()}));let n=null;u&&(T&&console.log("setting onmousemove",h),h.on("mousemove",(i=>{const[h,u]=o.pointer(i),m=B.find(h,u);m!==n&&(n=m,t.clearRect(0,0,c,d),I.forEach((({d:i,cell:c,show:d},h)=>{if(!d&&h!==n)return;const[u,p]=o.polygonCentroid(c),m=(Math.round(Math.atan2(p-r(i),u-e(i))/Math.PI*2)+4)%4;t.save(),t.translate(y?u:e(i),y?p:r(i)),t.textAlign=0===m?"left":1===m?"center":2===m?"right":"center",t.textBaseline=0===m?"middle":1===m?"top":2===m?"middle":"bottom",t.font=h===n?g:f,t.fillStyle=a,t.strokeStyle=s,t.lineWidth=b,t.strokeText(l(i),0,0),t.fillText(l(i),0,0),t.restore()})),p&&"function"==typeof p&&p(m))})))}():function(){let t=null;A&&h.selectAll("style.smartLabels").data([0]).join("style").attr("class","smartLabels").html(`\n        svg g.labels > text.occluded:not(.selected) { ${S} }\n    `);const i=h.selectAll("rect.smartLabels").data([0]).join("rect").attr("class","smartLabels").attr("width",c).attr("height",d).attr("fill",m).attr("stroke","none"),O={top:t=>t.attr("text-anchor","middle").attr("y",-6),right:t=>t.attr("text-anchor","start").attr("dy","0.35em").attr("x",6),bottom:t=>t.attr("text-anchor","middle").attr("dy","0.71em").attr("y",6),left:t=>t.attr("text-anchor","end").attr("dy","0.35em").attr("x",-6)};let T;(k||y)&&(t=h.selectAll("g#anchors").data([I]).join("g").attr("pointer-events","none").attr("id","anchors").attr("stroke",w).attr("fill",j).selectAll("path.anchor").data((t=>t)).join("path").attr("class","anchor").attr("display",(({show:t})=>t?null:"none")).attr("d",(({d:t,cell:n})=>n?`M${o.polygonCentroid(n)}L${e(t)},${r(t)}`:null))),x&&h.selectAll("path#voronoi").data([1]).join("path").attr("id","voronoi").attr("stroke",v).attr("pointer-events","none").attr("d",E.render()),L&&(T=h.selectAll("circle#points").data([1]).join("path").attr("id","points").attr("pointer-events","none").attr("stroke",M).attr("fill",P).attr("d",B.renderPoints(null,2)));const $=h.selectAll("g.labels").data([I]).join("g").attr("class","labels").attr("fill",a).attr("stroke",s).attr("stroke-width",b).attr("paint-order","stroke").attr("pointer-events","none").selectAll("text").data((t=>t)).join("text").style("font",f).each((function({d:t,cell:n}){if(!n)return;const[l,a]=o.polygonCentroid(n),s=(Math.round(Math.atan2(a-r(t),l-e(t))/Math.PI*2)+4)%4;o.select(this).call(0===s?O.right:3===s?O.top:1===s?O.bottom:O.left)})).attr("transform",(({d:t,cell:n})=>{if(y){const[t,e]=o.polygonCentroid(n);return`translate(${t}, ${e})`}return`translate(${e(t)}, ${r(t)})`})).attr("display",(({show:t})=>t?null:"none")).text((({d:t},e,o)=>l(t,e,o)));let F=null;if(u&&i.on("mousemove",(e=>{const n=B.find(...o.pointer(e));n!==F&&(F=n,$.attr("display",(({show:t},e)=>e===F||t?null:"none")).style("font",((t,e)=>e===F?g:f)).classed("selected",((t,e)=>e===F)).filter(((t,e)=>e===F)).raise(),t&&t.attr("display",(({show:t},e)=>t||e===F?null:"none")),L&&T.attr("fill",((t,e)=>C)).classed("selected",((t,e)=>e===F)),p&&"function"==typeof p&&p(n))})),A){const t=new MutationObserver((function(){document.contains(h.node())&&(h.call(n,"g.labels > text"),t.disconnect())}));t.observe(document,{attributes:!1,childList:!0,characterData:!1,subtree:!0})}}(),Object.assign(h.node(),{delaunay:B,voronoi:E,cells:I})}}));
+// smart-labels v0.0.3 Copyright (c) 2024 John Alexis Guerra Gómez
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("d3")):"function"==typeof define&&define.amd?define(["d3"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).smartLabels=e(t.d3)}(this,(function(t){"use strict";function e(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(o){if("default"!==o){var n=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,n.get?n:{enumerable:!0,get:function(){return t[o]}})}})),e.default=t,Object.freeze(e)}var o=e(t);function n(t,e="text"){const n=o.sort(t.selectAll(e),(t=>+t.getAttribute("data-priority"))).reverse().map((t=>{const{x:e,y:o,width:n,height:r}=t.getBoundingClientRect();return{node:t,x:e,y:o,width:n,height:r}})),r=[];for(const t of n){const e=r.some((e=>{return n=e,!((o=t).x+o.width<n.x||n.x+n.width<o.x||o.y+o.height<n.y||n.y+n.height<o.y);var o,n}));o.select(t.node).classed("occluded",e),e||r.push(t)}return r}return function(t,{x:e=t=>t[0],y:r=t=>t[1],r:l=()=>3,label:a=(t,e)=>e,fill:s="#333",stroke:i="white",threshold:c=2e3,width:d=null,height:h=null,target:f=null,font:u="10px sans-serif",hover:g=!0,onHover:p=t=>t,hoverFont:y="bolder 12px sans-serif",labelsInCentroids:b=!0,backgroundFill:m="#fefefe01",strokeWidth:v=5,showVoronoi:x=!1,voronoiStroke:w="#ccc",showAnchors:k=!1,anchorsStroke:A="orange",anchorsFill:L="none",useOcclusion:j=!0,occludedStyle:C="opacity: 0.2",showPoints:P=!1,pointsFill:S="#ccc",pointsSelectedFill:M="firebrick",pointsStroke:O="#ccc",renderer:T="svg",debug:$=!1,selected:E=null,padding:F=3}={}){t=t.filter(((t,o)=>void 0!==e(t,o)&&null!==e(t,o)&&void 0!==r(t,o)&&null!==r(t,o)));let I=o.extent(t,e),B=o.extent(t,r);if(d=d||I[1]-I[0],h=h||B[1]-B[0],$&&console.log("✅ smartLabels renderer",T),!function(t,e){return t&&t.node&&(t=t.node()),"canvas"===e.toLocaleLowerCase()?t instanceof HTMLCanvasElement:t instanceof SVGElement}(f,T))throw $&&console.log("❌ smartLabels Target doesn't match the renderer",f,T),new Error("Smartlabels Target doesn't match the renderer",f,T);"canvas"===T.toLocaleLowerCase()?(f=f?o.select(f.node?f.node():f):o.create("canvas").attr("width",d).attr("height",h),j=!1):f=(f=f?o.select(f.node?f.node():f):o.create("svg").attr("viewBox",[0,0,d,h]))||o.create("svg").attr("viewBox",[0,0,d,h]);const V=o.Delaunay.from(t,e,r),D=V.voronoi([I[0]-1,B[0]-1,I[1]+1,B[1]+1]);let H=t.map(((t,e)=>[t,D.cellPolygon(e)]));function R(t,o,n){if(!o){const l=V.find(e(t,n),r(t,n));if(-1===l)return console.log("couldn't find cell",l,t,e(t,n),r(t,n)),null;o=H[l][1]}return o}function W(n){$&&console.log("renderCanvasAnchorsVoronoiPoints","showAnchors",k,"labelsInCentroids",b,"showVoronoi",x,"showPoints",P),(k||b)&&H.forEach((({d:t,cell:l,show:a},s)=>{if(!a)return;const[i,c]=o.polygonCentroid(l);n.beginPath(),n.moveTo(i,c),n.lineTo(e(t,s),r(t,s)),n.strokeStyle=A,n.stroke()})),x&&(n.beginPath(),D.render(n),n.strokeStyle=w,n.stroke()),P&&(n.beginPath(),n.save(),n.globalAlpha=.7,n.fillStyle="black",t.forEach(((t,o)=>{n.beginPath(),n.arc(e(t,o),r(t,o),l(t,o),0,2*Math.PI)})),n.restore(),n.fillStyle=S,n.fill(),n.strokeStyle=O,n.stroke())}function q(t,n){H.forEach((({d:c,cell:d,show:h},f)=>{if(!h&&f!==n)return;const[g,p]=o.polygonCentroid(d),m=(Math.round(Math.atan2(p-r(c,f),g-e(c,f))/Math.PI*2)+4)%4;t.save();const x=l(c,f)+F,w=0===m?x:2===m?-x:x,k=1===m?x:3===m?-x:x;t.translate(b?g:e(c,f)+w,b?p:r(c,f)+k),t.textAlign=0===m?"left":1===m?"center":2===m?"right":"center",t.textBaseline=0===m?"middle":1===m?"top":2===m?"middle":"bottom",t.font=f===n?y:u,t.fillStyle=s,t.strokeStyle=i,t.lineWidth=v,t.strokeText(a(c,f),0,0),t.fillText(a(c,f),0,0),t.restore()}))}return H=H.map((([t,e],o)=>[t,R(t,e,o)])).map((([t,e])=>({d:t,cell:e,show:-o.polygonArea(e)>c}))),"canvas"===T.toLocaleLowerCase()?function(){const t=f.node().getContext("2d");W(t),q(t,E),g&&($&&console.log("setting onmousemove",f),f.on("mousemove",(e=>{const[n,r]=o.pointer(e),l=V.find(n,r);l!==E&&(E=l,t.clearRect(0,0,d,h),W(t),p&&"function"==typeof p&&p(l),q(t,E))})))}():function(){let t=null;j&&f.selectAll("style.smartLabels").data([0]).join("style").attr("class","smartLabels").html(`\n        svg g.labels > text.occluded:not(.selected) { ${C} }\n    `);const c=f.selectAll("rect.smartLabels").data([0]).join("rect").attr("class","smartLabels").attr("width",d).attr("height",h).attr("fill",m).attr("stroke","none"),T={top:t=>t.attr("text-anchor","middle").attr("y",((t,e)=>-(l(t,e)+F))),right:t=>t.attr("text-anchor","start").attr("dy","0.35em").attr("x",((t,e)=>l(t,e)+F)),bottom:t=>t.attr("text-anchor","middle").attr("dy","0.71em").attr("y",((t,e)=>l(t,e)+F)),left:t=>t.attr("text-anchor","end").attr("dy","0.35em").attr("x",((t,e)=>-(l(t,e)+F)))};let $;(k||b)&&(t=f.selectAll("g#anchors").data([H]).join("g").attr("pointer-events","none").attr("id","anchors").attr("stroke",A).attr("fill",L).selectAll("path.anchor").data((t=>t)).join("path").attr("class","anchor").attr("display",(({show:t})=>t?null:"none")).attr("d",(({d:t,cell:n},l)=>n?`M${o.polygonCentroid(n)}L${e(t,l)},${r(t,l)}`:null))),x&&f.selectAll("path#voronoi").data([1]).join("path").attr("id","voronoi").attr("stroke",w).attr("pointer-events","none").attr("d",D.render()),P&&($=f.selectAll("circle#points").data([1]).join("path").attr("id","points").attr("pointer-events","none").attr("stroke",O).attr("fill",S).attr("d",V.renderPoints(null,2)));const E=f.selectAll("g.labels").data([H]).join("g").attr("class","labels").attr("fill",s).attr("stroke",i).attr("stroke-width",v).attr("paint-order","stroke").attr("pointer-events","none").selectAll("text").data((t=>t)).join("text").style("font",u).each((function({d:t,cell:n},l){if(!n)return;const[a,s]=o.polygonCentroid(n),i=(Math.round(Math.atan2(s-r(t,l),a-e(t,l))/Math.PI*2)+4)%4;o.select(this).call(0===i?T.right:3===i?T.top:1===i?T.bottom:T.left)})).attr("transform",(({d:t,cell:n},l)=>{if(b){const[t,e]=o.polygonCentroid(n);return`translate(${t}, ${e})`}return`translate(${e(t,l)}, ${r(t,l)})`})).attr("display",(({show:t})=>t?null:"none")).text((({d:t},e,o)=>a(t,e,o)));let I=null;if(g&&c.on("mousemove",(e=>{const n=V.find(...o.pointer(e));n!==I&&(I=n,E.attr("display",(({show:t},e)=>e===I||t?null:"none")).style("font",((t,e)=>e===I?y:u)).classed("selected",((t,e)=>e===I)).filter(((t,e)=>e===I)).raise(),t&&t.attr("display",(({show:t},e)=>t||e===I?null:"none")),P&&$.attr("fill",((t,e)=>M)).classed("selected",((t,e)=>e===I)),p&&"function"==typeof p&&p(n))})),j){const t=new MutationObserver((function(){document.contains(f.node())&&(f.call(n,"g.labels > text"),t.disconnect())}));t.observe(document,{attributes:!1,childList:!0,characterData:!1,subtree:!0})}}(),Object.assign(f.node(),{delaunay:V,voronoi:D,cells:H})}}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smart-labels",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "A basic library for adding labels to a visualization when there is enough space",
   "type": "module",
   "main": "dist/smartLabels.min.js",

package/src/index.js

@@ -20,6 +20,7 @@ export default function smartLabels(
   {
     x = (d) => d[0], // x coordinate accessor, expected to be in pixels
     y = (d) => d[1], // y coordinate accessor, expected to be in pixels
+    r = () => 3, // radius accessor, expected to be in pixels
     label = (d, i) => i, // Accessor for the label
     fill = "#333", // label fill color
     stroke = "white", // label stroke color
@@ -53,11 +54,16 @@ export default function smartLabels(
     pointsStroke = "#ccc",
     renderer = "svg",
     debug = false,
+    selected = null,
+    padding = 3, // label padding in pixels
   } = {}
 ) {
   data = data.filter(
-    (d) =>
-      x(d) !== undefined && x(d) !== null && y(d) !== undefined && y(d) !== null
+    (d, index) =>
+      x(d, index) !== undefined &&
+      x(d, index) !== null &&
+      y(d, index) !== undefined &&
+      y(d, index) !== null
   );
 
   let xExtent = d3.extent(data, x),
@@ -66,12 +72,37 @@ export default function smartLabels(
   height = height || yExtent[1] - yExtent[0];
 
   if (debug) console.log("✅ smartLabels renderer", renderer);
+
+  function checkIfTargetMatchesRenderer(target, renderer) {
+    if (target && target.node) {
+      target = target.node();
+    }
+    if (renderer.toLocaleLowerCase() === "canvas") {
+      return target instanceof HTMLCanvasElement;
+    } else {
+      return target instanceof SVGElement;
+    }
+  }
+
+  if (!checkIfTargetMatchesRenderer(target, renderer)) {
+    if (debug) console.log("❌ smartLabels Target doesn't match the renderer", target, renderer);
+    throw new Error("Smartlabels Target doesn't match the renderer", target, renderer);
+  }
+
+  // Try to reuse the target
   if (renderer.toLocaleLowerCase() === "canvas") {
-    target =
-      d3.select(target) ||
-      d3.create("canvas").attr("width", width).attr("height", height);
+    if (target) {
+      target = d3.select(target.node ? target.node() : target);
+    } else {
+      target = d3.create("canvas").attr("width", width).attr("height", height);
+    }
     useOcclusion = false;
   } else {
+    if (target) {
+      target = d3.select(target.node ? target.node() : target);
+    } else {
+      target = d3.create("svg").attr("viewBox", [0, 0, width, height]);
+    }
     target = target || d3.create("svg").attr("viewBox", [0, 0, width, height]);
   }
 
@@ -86,16 +117,16 @@ export default function smartLabels(
   let cells = data.map((d, i) => [d, voronoi.cellPolygon(i)]);
   // Replace null cells with the nearest one
   cells = cells
-    .map(([d, cell]) => [d, getNearestCell(d, cell)])
+    .map(([d, cell], index) => [d, getNearestCell(d, cell, index)])
     .map(([d, cell]) => ({ d, cell, show: -d3.polygonArea(cell) > threshold }));
 
   // cells can be null when we have duplicated coords
   // https://github.com/d3/d3-delaunay/issues/106
-  function getNearestCell(d, cell) {
+  function getNearestCell(d, cell, index) {
     if (!cell) {
-      const i = delaunay.find(x(d), y(d));
+      const i = delaunay.find(x(d, index), y(d, index));
       if (i === -1) {
-        console.log("couldn't find cell", i, d, x(d), y(d));
+        console.log("couldn't find cell", i, d, x(d, index), y(d, index));
         return null;
       }
       cell = cells[i][1];
@@ -126,13 +157,25 @@ export default function smartLabels(
       .attr("stroke", "none");
 
     const orient = {
-      top: (text) => text.attr("text-anchor", "middle").attr("y", -6),
+      top: (text) =>
+        text
+          .attr("text-anchor", "middle")
+          .attr("y", (d, i) => -(r(d, i) + padding)),
       right: (text) =>
-        text.attr("text-anchor", "start").attr("dy", "0.35em").attr("x", 6),
+        text
+          .attr("text-anchor", "start")
+          .attr("dy", "0.35em")
+          .attr("x", (d, i) => r(d, i) + padding),
       bottom: (text) =>
-        text.attr("text-anchor", "middle").attr("dy", "0.71em").attr("y", 6),
+        text
+          .attr("text-anchor", "middle")
+          .attr("dy", "0.71em")
+          .attr("y", (d, i) => r(d, i) + padding),
       left: (text) =>
-        text.attr("text-anchor", "end").attr("dy", "0.35em").attr("x", -6),
+        text
+          .attr("text-anchor", "end")
+          .attr("dy", "0.35em")
+          .attr("x", (d, i) => -(r(d, i) + padding)),
     };
 
     if (showAnchors || labelsInCentroids) {
@@ -149,8 +192,10 @@ export default function smartLabels(
         .join("path")
         .attr("class", "anchor")
         .attr("display", ({ show }) => (show ? null : "none"))
-        .attr("d", ({ d, cell }) =>
-          cell ? `M${d3.polygonCentroid(cell)}L${x(d)},${y(d)}` : null
+        .attr("d", ({ d, cell }, index) =>
+          cell
+            ? `M${d3.polygonCentroid(cell)}L${x(d, index)},${y(d, index)}`
+            : null
         );
     }
 
@@ -193,11 +238,14 @@ export default function smartLabels(
       .data((d) => d)
       .join("text")
       .style("font", font)
-      .each(function ({ d, cell }) {
+      .each(function ({ d, cell }, index) {
         if (!cell) return;
         const [cx, cy] = d3.polygonCentroid(cell);
         const angle =
-          (Math.round((Math.atan2(cy - y(d), cx - x(d)) / Math.PI) * 2) + 4) %
+          (Math.round(
+            (Math.atan2(cy - y(d, index), cx - x(d, index)) / Math.PI) * 2
+          ) +
+            4) %
           4;
 
         d3.select(this).call(
@@ -210,13 +258,13 @@ export default function smartLabels(
                 : orient.left
         );
       })
-      .attr("transform", ({ d, cell }) => {
+      .attr("transform", ({ d, cell }, index) => {
         if (labelsInCentroids) {
           const [cx, cy] = d3.polygonCentroid(cell);
 
           return `translate(${cx}, ${cy})`;
         } else {
-          return `translate(${x(d)}, ${y(d)})`;
+          return `translate(${x(d, index)}, ${y(d, index)})`;
         }
       })
       .attr("display", ({ show }) => (show ? null : "none"))
@@ -276,20 +324,26 @@ export default function smartLabels(
     }
   } // renderSVG
 
-  function renderCanvas() {
-    const context = target.node().getContext("2d");
-    // const ratio = window.devicePixelRatio || 1;
-    // target.attr("width", width * ratio).attr("height", height * ratio);
-    // context.scale(ratio, ratio);
-    // context.clearRect(0, 0, width, height);
-
+  function renderCanvasAnchorsVoronoiPoints(context) {
+    if (debug)
+      console.log(
+        "renderCanvasAnchorsVoronoiPoints",
+        "showAnchors",
+        showAnchors,
+        "labelsInCentroids",
+        labelsInCentroids,
+        "showVoronoi",
+        showVoronoi,
+        "showPoints",
+        showPoints
+      );
     if (showAnchors || labelsInCentroids) {
-      cells.forEach(({ d, cell, show }) => {
+      cells.forEach(({ d, cell, show }, index) => {
         if (!show) return;
         const [cx, cy] = d3.polygonCentroid(cell);
         context.beginPath();
         context.moveTo(cx, cy);
-        context.lineTo(x(d), y(d));
+        context.lineTo(x(d, index), y(d, index));
         context.strokeStyle = anchorsStroke;
         context.stroke();
       });
@@ -304,23 +358,40 @@ export default function smartLabels(
 
     if (showPoints) {
       context.beginPath();
-      delaunay.renderPoints(context, 2);
+      // delaunay.renderPoints(context, 2);
+      context.save();
+      context.globalAlpha = 0.7;
+      context.fillStyle = "black";
+      data.forEach((d, i) => {
+        context.beginPath();
+        context.arc(x(d, i), y(d, i), r(d, i), 0, 2 * Math.PI);
+      });
+      context.restore();
       context.fillStyle = pointsFill;
       context.fill();
       context.strokeStyle = pointsStroke;
       context.stroke();
     }
+  } // renderCanvasAnchorsVoronoiPoints
 
-    cells.forEach(({ d, cell, show }) => {
-      if (!show) return;
+  function renderCanvasLabels(context, selected) {
+    cells.forEach(({ d, cell, show }, index) => {
+      if (!show && index !== selected) return;
       const [cx, cy] = d3.polygonCentroid(cell);
       const angle =
-        (Math.round((Math.atan2(cy - y(d), cx - x(d)) / Math.PI) * 2) + 4) % 4;
+        (Math.round(
+          (Math.atan2(cy - y(d, index), cx - x(d, index)) / Math.PI) * 2
+        ) +
+          4) %
+        4;
 
       context.save();
+      const dr = r(d, index) + padding;
+      const dx = angle === 0 ? dr : angle === 2 ? -dr : dr;
+      const dy = angle === 1 ? dr : angle === 3 ? -dr : dr;
       context.translate(
-        labelsInCentroids ? cx : x(d),
-        labelsInCentroids ? cy : y(d)
+        labelsInCentroids ? cx : x(d, index) + dx,
+        labelsInCentroids ? cy : y(d, index) + dy
       );
       context.textAlign =
         angle === 0
@@ -338,16 +409,23 @@ export default function smartLabels(
             : angle === 2
               ? "middle"
               : "bottom";
-      context.font = font;
+      context.font = index === selected ? hoverFont : font;
       context.fillStyle = fill;
       context.strokeStyle = stroke;
       context.lineWidth = strokeWidth;
-      context.strokeText(label(d), 0, 0);
-      context.fillText(label(d), 0, 0);
+      // if (debug) console.log(index, dx, dy, angle);
+      context.strokeText(label(d, index), 0, 0);
+      context.fillText(label(d, index), 0, 0);
       context.restore();
     });
+  } // renderCanvasLabels
+
+  function renderCanvas() {
+    const context = target.node().getContext("2d");
+
+    renderCanvasAnchorsVoronoiPoints(context);
+    renderCanvasLabels(context, selected);
 
-    let selected = null;
     if (hover) {
       if (debug) console.log("setting onmousemove", target);
 
@@ -358,44 +436,9 @@ export default function smartLabels(
         selected = i;
 
         context.clearRect(0, 0, width, height);
-        cells.forEach(({ d, cell, show }, index) => {
-          if (!show && index !== selected) return;
-          const [cx, cy] = d3.polygonCentroid(cell);
-          const angle =
-            (Math.round((Math.atan2(cy - y(d), cx - x(d)) / Math.PI) * 2) + 4) %
-            4;
-
-          context.save();
-          context.translate(
-            labelsInCentroids ? cx : x(d),
-            labelsInCentroids ? cy : y(d)
-          );
-          context.textAlign =
-            angle === 0
-              ? "left"
-              : angle === 1
-                ? "center"
-                : angle === 2
-                  ? "right"
-                  : "center";
-          context.textBaseline =
-            angle === 0
-              ? "middle"
-              : angle === 1
-                ? "top"
-                : angle === 2
-                  ? "middle"
-                  : "bottom";
-          context.font = index === selected ? hoverFont : font;
-          context.fillStyle = fill;
-          context.strokeStyle = stroke;
-          context.lineWidth = strokeWidth;
-          context.strokeText(label(d), 0, 0);
-          context.fillText(label(d), 0, 0);
-          context.restore();
-        });
-
+        renderCanvasAnchorsVoronoiPoints(context);
         if (onHover && typeof onHover === "function") onHover(i);
+        renderCanvasLabels(context, selected);
       });
     }
   } // renderCanvas