30:T57c,svg = { const width = 928; const height = 400; const svg = d3 .create("svg") .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 14.5px sans-serif;"); // Important! Make sure the SVG is attached to the DOM before calling occlusion(), // so that the bounding boxes can be measured. yield svg.node(); const n = 1000; svg .selectAll("text") .data(rwg(n)) .join("text") .text((d) => d) .attr("x", () => (width * Math.random()) | 0) .attr("y", () => (height * Math.random()) | 0); // Raise on mouseover, set data-priority on click. let priority = 0; svg .selectAll("text") .on("mouseover", function () { d3.select(this).attr("fill", "red").raise(); svg.call(occlusion); }) .on("mouseout", function () { d3.select(this).attr("fill", null); svg.call(occlusion); }) .on("click", function () { const node = d3.select(this); const cur = +node.attr("data-priority"); node .attr("data-priority", cur ? null : ++priority) .style("fill", cur ? null : "steelblue"); svg.call(occlusion); }); // Introduce random changes. do { const i = (Math.random() * n) | 0; svg.select(`text:nth-of-type(${i})`).raise(); svg.call(occlusion); await Promises.delay(300); } while (true); }31:[] 2e:{"title":"Occlusion","cells":[{"id":0,"value":"

Occlusion

D3 › Gallery

\n\n# Occlusion\n\nHides the text nodes that are covered by another node. Add a data-priority attribute to sort by priority. (If you have very many labels, Benjamin Schmidt’s [version](https://observablehq.com/@bmschmidt/finding-text-occlusion-with-quadtrees) explores efficient optimization strategies with quadtrees or RBush.)","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"Usage:\n~~~{js}\nimport {occlusion} from \"@fil/occlusion\"\nsvg.call(occlusion)\n~~~\n\nStyle with CSS:\n~~~~{css}\n.occluded { display:none }\n~~~~\n","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"function occlusion(svg, against = \"text\") {\n const nodes = d3\n .sort(svg.selectAll(against), (node) => +node.getAttribute(\"data-priority\"))\n .reverse()\n .map((node) => {\n const { x, y, width, height } = node.getBoundingClientRect();\n return { node, x, y, width, height };\n });\n\n const visible = [];\n for (const d of nodes) {\n const occluded = visible.some((e) => intersectRect(d, e));\n d3.select(d.node).classed(\"occluded\", occluded);\n if (!occluded) visible.push(d);\n }\n return visible;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"// This intersection function works for rect and text, but not so much for circles.\nfunction intersectRect(a, b) {\n return !(\n a.x + a.width < b.x ||\n b.x + b.width < a.x ||\n a.y + a.height < b.y ||\n b.y + b.height < a.y\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"// https://www.npmjs.com/package/random-words\nrwg = require(\"random-words@1.1.0\").catch(() => window.words)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}