From 39592347cc742838a1d078031b897fe26a94adaf Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Mon, 27 Dec 2021 13:06:58 -0500 Subject: [PATCH] add graph depth config --- data/graphConfig.yaml | 1 + layouts/_default/section.html | 0 layouts/partials/graph.html | 33 +++++++++++++++++++++++++++------ 3 files changed, 28 insertions(+), 6 deletions(-) create mode 100644 layouts/_default/section.html diff --git a/data/graphConfig.yaml b/data/graphConfig.yaml index 4104e42..3f8d3fb 100644 --- a/data/graphConfig.yaml +++ b/data/graphConfig.yaml @@ -1,5 +1,6 @@ enableLegend: false enableDrag: true enableZoom: true +depth: -1 # set to -1 to show full graph paths: - /moc: "#4388cc" \ No newline at end of file diff --git a/layouts/_default/section.html b/layouts/_default/section.html new file mode 100644 index 0000000..e69de29 diff --git a/layouts/partials/graph.html b/layouts/partials/graph.html index 7dcd536..e8cd966 100644 --- a/layouts/partials/graph.html +++ b/layouts/partials/graph.html @@ -16,12 +16,35 @@ const content = {{$.Site.Data.contentIndex}} const curPage = {{ strings.TrimRight "/" .Page.RelPermalink }} const pathColors = {{$.Site.Data.graphConfig.paths}} + let depth = {{$.Site.Data.graphConfig.depth}} const parseIdsFromLinks = (links) => [...(new Set(links.flatMap(link => ([link.source, link.target]))))] + const neighbours = new Set() + const wl = [curPage || "/", "__SENTINEL"] + if (depth >= 0) { + while (depth >= 0 && wl.length > 0) { + // compute neighbours + const cur = wl.shift() + console.log(depth, cur, wl) + if (cur === "__SENTINEL") { + depth-- + wl.push("__SENTINEL") + } else { + neighbours.add(cur) + const outgoing = index.links[cur] || [] + const incoming = index.backlinks[cur] || [] + console.log(incoming) + wl.push(...outgoing.map(l => l.target), ...incoming.map(l => l.source)) + } + } + } else { + parseIdsFromLinks(links).forEach(id => neighbours.add(id)) + } + const data = { - nodes: parseIdsFromLinks(links).map(id => ({id})), - links, + nodes: [...neighbours].map(id => ({id})), + links: links.filter(l => neighbours.has(l.source) && neighbours.has(l.target)), } const color = (d) => { @@ -70,10 +93,8 @@ const width = document.getElementById("graph-container").offsetWidth const simulation = d3.forceSimulation(data.nodes) - .force("charge", d3.forceManyBody().strength(-20)) - .force("link", d3.forceLink(data.links) - .id(d => d.id) - ) + .force("charge", d3.forceManyBody().strength(-30)) + .force("link", d3.forceLink(data.links).id(d => d.id)) .force("center", d3.forceCenter()); const svg = d3.select('#graph-container')