2a:["$","title",null,{"children":"Occlusion | D3 | Observable"}] 2f: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); }30:[] 2d:{"id":"56a170de7e71a28e","slug":"occlusion","title":"Occlusion","thumbnail":"4e3e3594431c71ca265ded37a8122656a7ce1b4cf77fa8dd5f44a7f6ca71eb23","access_level":"public","create_time":"$D2020-01-10T15:02:50.020Z","update_time":"$D2023-08-01T14:38:30.954Z","view_time":null,"first_public_time":"$D2020-01-10T16:06:22.259Z","fork":false,"stars":58,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":291,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}],"members":[{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"editor"},{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":51,"collection":{"id":"345b01c448a705cd","slug":"label","title":"Label","owner":{"id":"da2a32154638c457","login":"fil","name":"Fil"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body" 29:E{"digest":"NEXT_REDIRECT;replace;/@d3/occlusion;307;"}