| | |
| | | } |
| | | } |
| | | } else { |
| | | links.flatMap(l => [l.source, l.target]).forEach((id) => neighbourhood.add(id)) |
| | | Object.keys(data).forEach(id => neighbourhood.add(id)) |
| | | } |
| | | |
| | | const graphData: { nodes: NodeData[], links: LinkData[] } = { |
| | |
| | | const labels = graphNode |
| | | .append("text") |
| | | .attr("dx", 0) |
| | | .attr("dy", (d) => nodeRadius(d) - 8 + "px") |
| | | .attr("dy", (d) => -nodeRadius(d) + "px") |
| | | .attr("text-anchor", "middle") |
| | | .text((d) => data[d.id]?.title || (d.id.charAt(1).toUpperCase() + d.id.slice(2)).replace("-", " ")) |
| | | .style('opacity', (opacityScale - 1) / 3.75) |
| | |
| | | function renderGlobalGraph() { |
| | | const slug = document.body.dataset["slug"]! |
| | | const container = document.getElementById("global-graph-outer") |
| | | const sidebar = container?.closest(".sidebar") as HTMLElement |
| | | container?.classList.add("active") |
| | | if (sidebar) { |
| | | sidebar.style.zIndex = "1" |
| | | } |
| | | |
| | | renderGraph("global-graph-container", slug) |
| | | |
| | | function hideGlobalGraph() { |
| | | container?.classList.remove("active") |
| | | const graph = document.getElementById("global-graph-container") |
| | | if (sidebar) { |
| | | sidebar.style.zIndex = "unset" |
| | | } |
| | | if (!graph) return |
| | | removeAllChildren(graph) |
| | | } |
| | |
| | | containerIcon?.addEventListener("click", renderGlobalGraph) |
| | | }) |
| | | |
| | | let resizeEventDebounce: number | undefined = undefined |
| | | window.addEventListener('resize', () => { |
| | | if (resizeEventDebounce) { |
| | | clearTimeout(resizeEventDebounce) |
| | | } |
| | | |
| | | resizeEventDebounce = window.setTimeout(async () => { |
| | | const slug = document.body.dataset["slug"]! |
| | | await renderGraph("graph-container", slug) |
| | | }, 50) |
| | | }) |