smart-labels 0.0.6 → 0.0.8

package/README.md

@@ -33,9 +33,9 @@ Receives the data, accessors for the x and y coordinates as well as the label. E
     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
+    renderer = "svg", // canvas or svg
     fill = "#333", // label fill color
     stroke = "white", // label stroke color
-    threshold = 2000, // Areas over this size would get labels
     width = null,
     height = null,
     target = null, // Where do you want it to draw
@@ -44,7 +44,9 @@ Receives the data, accessors for the x and y coordinates as well as the label. E
     onHover = (i) => i, // callback when hovered, will pass the index of the selected element
     hoverFont = "bolder 12px sans-serif",
     labelsInCentroids = true,
-
+    threshold = 2000, // Areas over this size would get labels
+    alwaysShow = (d) => false, // If returns true for the node, it will always show the label
+    showLabel = (d, cell) => alwaysShow(d) || -d3.polygonArea(cell) > threshold, // If true, show the label
     backgroundFill = "#fefefe01", // What to paint the bg rect of the labels. Needed for the onHover
     strokeWidth = 5,
 
@@ -63,10 +65,10 @@ Receives the data, accessors for the x and y coordinates as well as the label. E
     pointsFill = "#ccc",
     pointsSelectedFill = "firebrick",
     pointsStroke = "#ccc",
-    renderer = "svg",
     debug = false,
     selected = null,
     padding = 3, // label padding in pixels
+
   }
 ```
 

package/dist/smartLabels.es.js

@@ -1,4 +1,4 @@
-// smart-labels v0.0.4 Copyright (c) 2024 John Alexis Guerra Gómez
+// smart-labels v0.0.6 Copyright (c) 2024 John Alexis Guerra Gómez
 import * as d3 from 'd3';
 
 // Based on https://observablehq.com/@d3/voronoi-labels by Mike Bostock
@@ -26,15 +26,18 @@ function smartLabels(
     label = (d, i) => i, // Accessor for the label
     fill = "#333", // label fill color
     stroke = "white", // label stroke color
-    threshold = 2000, // Areas over this size would get labels
     width = null,
     height = null,
     target = null, // Where do you want it to draw
-    font = "10px sans-serif",
+    renderer = "svg", // canvas or svg
+    font = () => "18px sans-serif",
     hover = true, // Show label of the hovered point
     onHover = (i) => i, // callback when hovered, will pass the index of the selected element
-    hoverFont = "bolder 12px sans-serif",
+    hoverFont = () => "bolder 12px sans-serif",
     labelsInCentroids = true,
+    threshold = 2000, // Areas over this size would get labels
+    alwaysShow = (d) => false, // If returns true for the node, it will always show the label
+    showLabel = (d, cell) => alwaysShow(d) || -d3.polygonArea(cell) > threshold, // If true, show the label
 
     backgroundFill = "#fefefe01", // What to paint the bg rect of the labels. Needed for the onHover
     strokeWidth = 5,
@@ -54,7 +57,6 @@ function smartLabels(
     pointsFill = "#ccc",
     pointsSelectedFill = "firebrick",
     pointsStroke = "#ccc",
-    renderer = "svg",
     debug = false,
     selected = null,
     padding = 3, // label padding in pixels
@@ -68,6 +70,9 @@ function smartLabels(
       y(d, index) !== null
   );
 
+  if (typeof font === "string") font = () => font;
+  if (typeof hoverFont === "string") hoverFont = () => hoverFont;
+
   let xExtent = d3.extent(data, x),
     yExtent = d3.extent(data, y);
   width = width || xExtent[1] - xExtent[0];
@@ -87,8 +92,17 @@ function smartLabels(
   }
 
   if (target && !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);
+    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
@@ -120,7 +134,7 @@ function smartLabels(
   // Replace null cells with the nearest one
   cells = cells
     .map(([d, cell], index) => [d, getNearestCell(d, cell, index)])
-    .map(([d, cell]) => ({ d, cell, show: -d3.polygonArea(cell) > threshold }));
+    .map(([d, cell]) => ({ d, cell, show: showLabel(d, cell) }));
 
   // cells can be null when we have duplicated coords
   // https://github.com/d3/d3-delaunay/issues/106
@@ -239,7 +253,7 @@ function smartLabels(
       .selectAll("text")
       .data((d) => d)
       .join("text")
-      .style("font", font)
+      .style("font", ({d}, i) => font(d, i))
       .each(function ({ d, cell }, index) {
         if (!cell) return;
         const [cx, cy] = d3.polygonCentroid(cell);
@@ -285,7 +299,9 @@ function smartLabels(
           .attr("display", ({ show }, i) =>
             i === selected || show ? null : "none"
           )
-          .style("font", (_, i) => (i === selected ? hoverFont : font))
+          .style("font", ({d}, i) =>
+            i === selected ? hoverFont(d, i) : font(d, i)
+          )
           .classed("selected", (_, i) => i === selected)
           .filter((_, i) => i === selected)
           .raise();
@@ -411,7 +427,7 @@ function smartLabels(
             : angle === 2
               ? "middle"
               : "bottom";
-      context.font = index === selected ? hoverFont : font;
+      context.font = index === selected ? hoverFont(d, index) : font(d, index);
       context.fillStyle = fill;
       context.strokeStyle = stroke;
       context.lineWidth = strokeWidth;

package/dist/smartLabels.js

@@ -1,4 +1,4 @@
-// smart-labels v0.0.4 Copyright (c) 2024 John Alexis Guerra Gómez
+// smart-labels v0.0.6 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) :
@@ -49,15 +49,18 @@ function smartLabels(
     label = (d, i) => i, // Accessor for the label
     fill = "#333", // label fill color
     stroke = "white", // label stroke color
-    threshold = 2000, // Areas over this size would get labels
     width = null,
     height = null,
     target = null, // Where do you want it to draw
-    font = "10px sans-serif",
+    renderer = "svg", // canvas or svg
+    font = () => "18px sans-serif",
     hover = true, // Show label of the hovered point
     onHover = (i) => i, // callback when hovered, will pass the index of the selected element
-    hoverFont = "bolder 12px sans-serif",
+    hoverFont = () => "bolder 12px sans-serif",
     labelsInCentroids = true,
+    threshold = 2000, // Areas over this size would get labels
+    alwaysShow = (d) => false, // If returns true for the node, it will always show the label
+    showLabel = (d, cell) => alwaysShow(d) || -d3__namespace.polygonArea(cell) > threshold, // If true, show the label
 
     backgroundFill = "#fefefe01", // What to paint the bg rect of the labels. Needed for the onHover
     strokeWidth = 5,
@@ -77,7 +80,6 @@ function smartLabels(
     pointsFill = "#ccc",
     pointsSelectedFill = "firebrick",
     pointsStroke = "#ccc",
-    renderer = "svg",
     debug = false,
     selected = null,
     padding = 3, // label padding in pixels
@@ -91,6 +93,9 @@ function smartLabels(
       y(d, index) !== null
   );
 
+  if (typeof font === "string") font = () => font;
+  if (typeof hoverFont === "string") hoverFont = () => hoverFont;
+
   let xExtent = d3__namespace.extent(data, x),
     yExtent = d3__namespace.extent(data, y);
   width = width || xExtent[1] - xExtent[0];
@@ -110,8 +115,17 @@ function smartLabels(
   }
 
   if (target && !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);
+    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
@@ -143,7 +157,7 @@ function smartLabels(
   // Replace null cells with the nearest one
   cells = cells
     .map(([d, cell], index) => [d, getNearestCell(d, cell, index)])
-    .map(([d, cell]) => ({ d, cell, show: -d3__namespace.polygonArea(cell) > threshold }));
+    .map(([d, cell]) => ({ d, cell, show: showLabel(d, cell) }));
 
   // cells can be null when we have duplicated coords
   // https://github.com/d3/d3-delaunay/issues/106
@@ -262,7 +276,7 @@ function smartLabels(
       .selectAll("text")
       .data((d) => d)
       .join("text")
-      .style("font", font)
+      .style("font", ({d}, i) => font(d, i))
       .each(function ({ d, cell }, index) {
         if (!cell) return;
         const [cx, cy] = d3__namespace.polygonCentroid(cell);
@@ -308,7 +322,9 @@ function smartLabels(
           .attr("display", ({ show }, i) =>
             i === selected || show ? null : "none"
           )
-          .style("font", (_, i) => (i === selected ? hoverFont : font))
+          .style("font", ({d}, i) =>
+            i === selected ? hoverFont(d, i) : font(d, i)
+          )
           .classed("selected", (_, i) => i === selected)
           .filter((_, i) => i === selected)
           .raise();
@@ -434,7 +450,7 @@ function smartLabels(
             : angle === 2
               ? "middle"
               : "bottom";
-      context.font = index === selected ? hoverFont : font;
+      context.font = index === selected ? hoverFont(d, index) : font(d, index);
       context.fillStyle = fill;
       context.strokeStyle = stroke;
       context.lineWidth = strokeWidth;

package/dist/smartLabels.min.js

@@ -1,2 +1,2 @@
-// smart-labels v0.0.4 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),f&&!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})}}));
+// smart-labels v0.0.6 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",width:c=null,height:d=null,target:h=null,renderer:f="svg",font:u=()=>"18px sans-serif",hover:g=!0,onHover:p=t=>t,hoverFont:y=()=>"bolder 12px sans-serif",labelsInCentroids:b=!0,threshold:m=2e3,alwaysShow:v=t=>!1,showLabel:w=(t,e)=>v(t)||-o.polygonArea(e)>m,backgroundFill:x="#fefefe01",strokeWidth:k=5,showVoronoi:L=!1,voronoiStroke:A="#ccc",showAnchors:j=!1,anchorsStroke:S="orange",anchorsFill:C="none",useOcclusion:P=!0,occludedStyle:M="opacity: 0.2",showPoints:O=!1,pointsFill:T="#ccc",pointsSelectedFill:$="firebrick",pointsStroke:E="#ccc",debug:F=!1,selected:I=null,padding:B=3}={}){t=t.filter(((t,o)=>void 0!==e(t,o)&&null!==e(t,o)&&void 0!==r(t,o)&&null!==r(t,o))),"string"==typeof u&&(u=()=>u),"string"==typeof y&&(y=()=>y);let V=o.extent(t,e),D=o.extent(t,r);if(c=c||V[1]-V[0],d=d||D[1]-D[0],F&&console.log("✅ smartLabels renderer",f),h&&!function(t,e){return t&&t.node&&(t=t.node()),"canvas"===e.toLocaleLowerCase()?t instanceof HTMLCanvasElement:t instanceof SVGElement}(h,f))throw F&&console.log("❌ smartLabels Target doesn't match the renderer",h,f),new Error("Smartlabels Target doesn't match the renderer",h,f);"canvas"===f.toLocaleLowerCase()?(h=h?o.select(h.node?h.node():h):o.create("canvas").attr("width",c).attr("height",d),P=!1):h=(h=h?o.select(h.node?h.node():h):o.create("svg").attr("viewBox",[0,0,c,d]))||o.create("svg").attr("viewBox",[0,0,c,d]);const H=o.Delaunay.from(t,e,r),R=H.voronoi([V[0]-1,D[0]-1,V[1]+1,D[1]+1]);let W=t.map(((t,e)=>[t,R.cellPolygon(e)]));function q(t,o,n){if(!o){const l=H.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=W[l][1]}return o}function z(n){F&&console.log("renderCanvasAnchorsVoronoiPoints","showAnchors",j,"labelsInCentroids",b,"showVoronoi",L,"showPoints",O),(j||b)&&W.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=S,n.stroke()})),L&&(n.beginPath(),R.render(n),n.strokeStyle=A,n.stroke()),O&&(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=T,n.fill(),n.strokeStyle=E,n.stroke())}function G(t,n){W.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 v=l(c,f)+B,w=0===m?v:2===m?-v:v,x=1===m?v:3===m?-v:v;t.translate(b?g:e(c,f)+w,b?p:r(c,f)+x),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(c,f):u(c,f),t.fillStyle=s,t.strokeStyle=i,t.lineWidth=k,t.strokeText(a(c,f),0,0),t.fillText(a(c,f),0,0),t.restore()}))}return W=W.map((([t,e],o)=>[t,q(t,e,o)])).map((([t,e])=>({d:t,cell:e,show:w(t,e)}))),"canvas"===f.toLocaleLowerCase()?function(){const t=h.node().getContext("2d");z(t),G(t,I),g&&(F&&console.log("setting onmousemove",h),h.on("mousemove",(e=>{const[n,r]=o.pointer(e),l=H.find(n,r);l!==I&&(I=l,t.clearRect(0,0,c,d),z(t),p&&"function"==typeof p&&p(l),G(t,I))})))}():function(){let t=null;P&&h.selectAll("style.smartLabels").data([0]).join("style").attr("class","smartLabels").html(`\n        svg g.labels > text.occluded:not(.selected) { ${M} }\n    `);const f=h.selectAll("rect.smartLabels").data([0]).join("rect").attr("class","smartLabels").attr("width",c).attr("height",d).attr("fill",x).attr("stroke","none"),m={top:t=>t.attr("text-anchor","middle").attr("y",((t,e)=>-(l(t,e)+B))),right:t=>t.attr("text-anchor","start").attr("dy","0.35em").attr("x",((t,e)=>l(t,e)+B)),bottom:t=>t.attr("text-anchor","middle").attr("dy","0.71em").attr("y",((t,e)=>l(t,e)+B)),left:t=>t.attr("text-anchor","end").attr("dy","0.35em").attr("x",((t,e)=>-(l(t,e)+B)))};let v;(j||b)&&(t=h.selectAll("g#anchors").data([W]).join("g").attr("pointer-events","none").attr("id","anchors").attr("stroke",S).attr("fill",C).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))),L&&h.selectAll("path#voronoi").data([1]).join("path").attr("id","voronoi").attr("stroke",A).attr("pointer-events","none").attr("d",R.render()),O&&(v=h.selectAll("circle#points").data([1]).join("path").attr("id","points").attr("pointer-events","none").attr("stroke",E).attr("fill",T).attr("d",H.renderPoints(null,2)));const w=h.selectAll("g.labels").data([W]).join("g").attr("class","labels").attr("fill",s).attr("stroke",i).attr("stroke-width",k).attr("paint-order","stroke").attr("pointer-events","none").selectAll("text").data((t=>t)).join("text").style("font",(({d:t},e)=>u(t,e))).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?m.right:3===i?m.top:1===i?m.bottom:m.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 F=null;if(g&&f.on("mousemove",(e=>{const n=H.find(...o.pointer(e));n!==F&&(F=n,w.attr("display",(({show:t},e)=>e===F||t?null:"none")).style("font",(({d:t},e)=>e===F?y(t,e):u(t,e))).classed("selected",((t,e)=>e===F)).filter(((t,e)=>e===F)).raise(),t&&t.attr("display",(({show:t},e)=>t||e===F?null:"none")),O&&v.attr("fill",((t,e)=>$)).classed("selected",((t,e)=>e===F)),p&&"function"==typeof p&&p(n))})),P){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:H,voronoi:R,cells:W})}}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smart-labels",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "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

@@ -24,15 +24,18 @@ export default function smartLabels(
     label = (d, i) => i, // Accessor for the label
     fill = "#333", // label fill color
     stroke = "white", // label stroke color
-    threshold = 2000, // Areas over this size would get labels
     width = null,
     height = null,
     target = null, // Where do you want it to draw
-    font = "10px sans-serif",
+    renderer = "svg", // canvas or svg
+    font = () => "18px sans-serif",
     hover = true, // Show label of the hovered point
     onHover = (i) => i, // callback when hovered, will pass the index of the selected element
-    hoverFont = "bolder 12px sans-serif",
+    hoverFont = () => "bolder 12px sans-serif",
     labelsInCentroids = true,
+    threshold = 2000, // Areas over this size would get labels
+    alwaysShow = (d) => false, // If returns true for the node, it will always show the label
+    showLabel = (d, cell) => alwaysShow(d) || -d3.polygonArea(cell) > threshold, // If true, show the label
 
     backgroundFill = "#fefefe01", // What to paint the bg rect of the labels. Needed for the onHover
     strokeWidth = 5,
@@ -52,7 +55,6 @@ export default function smartLabels(
     pointsFill = "#ccc",
     pointsSelectedFill = "firebrick",
     pointsStroke = "#ccc",
-    renderer = "svg",
     debug = false,
     selected = null,
     padding = 3, // label padding in pixels
@@ -66,6 +68,9 @@ export default function smartLabels(
       y(d, index) !== null
   );
 
+  if (typeof font === "string") font = () => font;
+  if (typeof hoverFont === "string") hoverFont = () => hoverFont;
+
   let xExtent = d3.extent(data, x),
     yExtent = d3.extent(data, y);
   width = width || xExtent[1] - xExtent[0];
@@ -85,8 +90,17 @@ export default function smartLabels(
   }
 
   if (target && !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);
+    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
@@ -118,7 +132,7 @@ export default function smartLabels(
   // Replace null cells with the nearest one
   cells = cells
     .map(([d, cell], index) => [d, getNearestCell(d, cell, index)])
-    .map(([d, cell]) => ({ d, cell, show: -d3.polygonArea(cell) > threshold }));
+    .map(([d, cell]) => ({ d, cell, show: showLabel(d, cell) }));
 
   // cells can be null when we have duplicated coords
   // https://github.com/d3/d3-delaunay/issues/106
@@ -237,7 +251,7 @@ export default function smartLabels(
       .selectAll("text")
       .data((d) => d)
       .join("text")
-      .style("font", font)
+      .style("font", ({d}, i) => font(d, i))
       .each(function ({ d, cell }, index) {
         if (!cell) return;
         const [cx, cy] = d3.polygonCentroid(cell);
@@ -283,7 +297,9 @@ export default function smartLabels(
           .attr("display", ({ show }, i) =>
             i === selected || show ? null : "none"
           )
-          .style("font", (_, i) => (i === selected ? hoverFont : font))
+          .style("font", ({d}, i) =>
+            i === selected ? hoverFont(d, i) : font(d, i)
+          )
           .classed("selected", (_, i) => i === selected)
           .filter((_, i) => i === selected)
           .raise();
@@ -409,7 +425,7 @@ export default function smartLabels(
             : angle === 2
               ? "middle"
               : "bottom";
-      context.font = index === selected ? hoverFont : font;
+      context.font = index === selected ? hoverFont(d, index) : font(d, index);
       context.fillStyle = fill;
       context.strokeStyle = stroke;
       context.lineWidth = strokeWidth;