2f:T8da,svgTree = (data) => { const root = prepareRoot(d3.hierarchy(data)); const nodes = root.descendants(); const links = root.links(); const height = (nodes.length + 1) * nodeSize; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-nodeSize / 2, (-nodeSize * 3) / 2, width, height]) .attr( "style", "max-width: 100%; height: auto; font: 10px sans-serif; overflow: visible;" ); const g = svg.append("g").attr("transform", "translate(80,0)"); const refArcData = nodes.flatMap((n) => n.data.refArcs ?? []); // tree links g.append("g") .attr("fill", "none") .attr("stroke", "#ccc") .selectAll("path") .data(links) .join("path") .attr("d", linkPath); const referencesGroup = g.append("g"); // arcs first, so circles render on top referencesGroup .append("g") .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-dasharray", "3 2") .attr("stroke-width", 1.5) .selectAll("path") .data(refArcData) .join("path") .attr("d", ({ px, py, x2, y2, r }) => arc({ x1: px, y1: py, x2, y2, r })); referencesGroup .append("g") .selectAll("circle") .data(refArcData) .join("circle") .attr("cx", (d) => d.px) .attr("cy", (d) => d.py) .attr("r", 2.5) .attr("fill", "tomato") .attr("stroke", "white") .attr("stroke-width", 0.5); referencesGroup .append("g") .selectAll("text") .data(refArcData) .join("text") .attr("x", (d) => d.px + 4) .attr("y", (d) => d.py + 1) .attr("dominant-baseline", "middle") .attr("font-size", "6") .text((d) => d.attr); // nodes const node = g .append("g") .selectAll("g") .data(nodes) .join("g") .attr("transform", (d) => `translate(0,${d.index * nodeSize})`); node .append("circle") .attr("cx", (d) => d.depth * nodeSize) .attr("r", 3) .attr("fill", nodeColor) .attr("stroke", "#333") .attr("stroke-width", 0.5); node .append("text") .attr("dy", "0.32em") .attr("x", (d) => d.depth * nodeSize + 6) .attr("stroke", "white") .attr("stroke-width", 0.2) .attr("paint-order", "stroke") .text(nodeLabel); return svg.node(); }30:[] 2d:{"title":"SVG Tree","cells":[{"id":0,"value":"# SVG Tree\n\nFor my blogpost [Hoistable SVG Defs in React](https://julesblom.com/writing/colocated-svg-defs).","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"demo = svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"svgTree(elementToNode(demo))","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"function elementToNode(el) {\n const node = {\n tag: `<${el.tagName.toLowerCase()}>`,\n id: el.getAttribute(\"id\") ?? undefined,\n refs: getUrlRefs(el)\n };\n\n const children = [...el.children].map(elementToNode);\n\n if (children.length) {\n node.children = children;\n }\n\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"function getUrlRefs(el) {\n const pattern = /url\$#([^)]+)\$/;\n return [...el.attributes].flatMap((attr) => {\n const id = attr.value.match(pattern)?.[1];\n return id ? [{ attr: attr.name, id }] : [];\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"nodeSize = 20 ","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"width = 380","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"prepareRoot = (origRoot) => {\n const root = origRoot.copy();\n\n root.eachBefore(\n ((i) => (d) => {\n d.index = i++;\n\n d.data.refArcs = (d.data.refs ?? []).flatMap(({ attr, id: refId }, i) => {\n const target = root.find((e) => e.data.id === refId);\n if (!target) return [];\n\n const nRefs = d.data.refs.length;\n const px = d.depth * nodeSize - 8;\n const py = d.index * nodeSize + (i - (nRefs - 1) / 2) * 5 + 8;\n\n const x2 = target.depth * nodeSize;\n const y2 = target.index * nodeSize;\n\n\n return [{ attr, px, py, x2, y2, r: Math.abs(y2 - py) / 2 }];\n });\n })(0)\n );\n\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"// function refArcPath({ x1, y1, x2, y2 }) {\n// const cx = Math.max(x1, x2) + 30;\n// return `M${x1},${y1} C${cx},${y1} ${cx},${y2} ${x2},${y2}`;\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"function arc({ x1, y1, x2, y2, r }) {\n\n return `\n M${x1},${y1}\n A${r},${r} 0,0,${y1 < y2 ? 0 : 1} ${x2},${y2}`;\n // A rx ry x-axis-rotation large-arc-flag sweep-flag x y\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"function linkPath({ source, target }) {\n return `\n M${source.depth * nodeSize},${source.index * nodeSize}\n V${target.index * nodeSize}\n H${target.depth * nodeSize}\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"function nodeLabel(d) {\n return d.data.id ? `${d.data.tag}#${d.data.id}` : `${d.data.tag}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"function nodeColor(d) {\n if (d.data.tag === \"defs\") {\n return \"#94a3b8\";\n }\n if (d.ancestors().some((a) => a.data.tag === \"defs\")) {\n return \"#a78bfa\";\n }\n return \"#60a5fa\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}