From e4cc625c33ecd2992dcf60f408417c3067b4fa2b Mon Sep 17 00:00:00 2001
From: Aiden Bai <aiden.bai05@gmail.com>
Date: Tue, 03 May 2022 16:34:27 +0000
Subject: [PATCH] Add future note about init function
---
assets/js/graph.js | 160 ++++++++++++++++++++++++++--------------------------
1 files changed, 80 insertions(+), 80 deletions(-)
diff --git a/assets/js/graph.js b/assets/js/graph.js
index 939fd99..c5829e9 100644
--- a/assets/js/graph.js
+++ b/assets/js/graph.js
@@ -7,41 +7,40 @@
enableLegend,
enableZoom
) {
- const container = document.getElementById('graph-container');
+ const container = document.getElementById('graph-container')
- const { index, links, content } = await fetchData;
- const curPage = url.replace(baseUrl, '');
+ const { index, links, content } = await fetchData
+ const curPage = url.replace(baseUrl, '')
const parseIdsFromLinks = (links) => [
...new Set(links.flatMap((link) => [link.source, link.target])),
- ];
+ ]
- // links is mutated by d3
- // we want to use links later on, so we make a copy and pass
- // that one to d3
- const copyLinks = JSON.parse(JSON.stringify(links));
+ // Links is mutated by d3. We want to use links later on, so we make a copy and pass that one to d3
+ // Note: shallow cloning does not work because it copies over references from the original array
+ const copyLinks = JSON.parse(JSON.stringify(links))
- const neighbours = new Set();
- const wl = [curPage || '/', '__SENTINEL'];
+ const neighbours = new Set()
+ const wl = [curPage || '/', '__SENTINEL']
if (depth >= 0) {
while (depth >= 0 && wl.length > 0) {
// compute neighbours
- const cur = wl.shift();
+ const cur = wl.shift()
if (cur === '__SENTINEL') {
- depth--;
- wl.push('__SENTINEL');
+ depth--
+ wl.push('__SENTINEL')
} else {
- neighbours.add(cur);
- const outgoing = index.links[cur] || [];
- const incoming = index.backlinks[cur] || [];
+ neighbours.add(cur)
+ const outgoing = index.links[cur] || []
+ const incoming = index.backlinks[cur] || []
wl.push(
...outgoing.map((l) => l.target),
...incoming.map((l) => l.source)
- );
+ )
}
}
} else {
- parseIdsFromLinks(copyLinks).forEach((id) => neighbours.add(id));
+ parseIdsFromLinks(copyLinks).forEach((id) => neighbours.add(id))
}
const data = {
@@ -49,52 +48,52 @@
links: copyLinks.filter(
(l) => neighbours.has(l.source) && neighbours.has(l.target)
),
- };
+ }
const color = (d) => {
if (d.id === curPage || (d.id === '/' && curPage === '')) {
- return 'var(--g-node-active)';
+ return 'var(--g-node-active)'
}
for (const pathColor of pathColors) {
- const path = Object.keys(pathColor)[0];
- const colour = pathColor[path];
+ const path = Object.keys(pathColor)[0]
+ const colour = pathColor[path]
if (d.id.startsWith(path)) {
- return colour;
+ return colour
}
}
- return 'var(--g-node)';
- };
+ return 'var(--g-node)'
+ }
const drag = (simulation) => {
function dragstarted(event, d) {
- if (!event.active) simulation.alphaTarget(1).restart();
- d.fx = d.x;
- d.fy = d.y;
+ if (!event.active) simulation.alphaTarget(1).restart()
+ d.fx = d.x
+ d.fy = d.y
}
function dragged(event, d) {
- d.fx = event.x;
- d.fy = event.y;
+ d.fx = event.x
+ d.fy = event.y
}
function dragended(event, d) {
- if (!event.active) simulation.alphaTarget(0);
- d.fx = null;
- d.fy = null;
+ if (!event.active) simulation.alphaTarget(0)
+ d.fx = null
+ d.fy = null
}
- const noop = () => {};
+ const noop = () => { }
return d3
.drag()
.on('start', enableDrag ? dragstarted : noop)
.on('drag', enableDrag ? dragged : noop)
- .on('end', enableDrag ? dragended : noop);
- };
+ .on('end', enableDrag ? dragended : noop)
+ }
- const height = Math.max(container.offsetHeight, 250);
- const width = container.offsetWidth;
+ const height = Math.max(container.offsetHeight, 250)
+ const width = container.offsetWidth
const simulation = d3
.forceSimulation(data.nodes)
@@ -106,38 +105,38 @@
.id((d) => d.id)
.distance(40)
)
- .force('center', d3.forceCenter());
+ .force('center', d3.forceCenter())
const svg = d3
.select('#graph-container')
.append('svg')
.attr('width', width)
.attr('height', height)
- .attr('viewBox', [-width / 2, -height / 2, width, height]);
+ .attr('viewBox', [-width / 2, -height / 2, width, height])
if (enableLegend) {
const legend = [
{ Current: 'var(--g-node-active)' },
{ Note: 'var(--g-node)' },
...pathColors,
- ];
+ ]
legend.forEach((legendEntry, i) => {
- const key = Object.keys(legendEntry)[0];
- const colour = legendEntry[key];
+ const key = Object.keys(legendEntry)[0]
+ const colour = legendEntry[key]
svg
.append('circle')
.attr('cx', -width / 2 + 20)
.attr('cy', height / 2 - 30 * (i + 1))
.attr('r', 6)
- .style('fill', colour);
+ .style('fill', colour)
svg
.append('text')
.attr('x', -width / 2 + 40)
.attr('y', height / 2 - 30 * (i + 1))
.text(key)
.style('font-size', '15px')
- .attr('alignment-baseline', 'middle');
- });
+ .attr('alignment-baseline', 'middle')
+ })
}
// draw links between nodes
@@ -150,7 +149,7 @@
.attr('stroke', 'var(--g-link)')
.attr('stroke-width', 2)
.attr('data-source', (d) => d.source.id)
- .attr('data-target', (d) => d.target.id);
+ .attr('data-target', (d) => d.target.id)
// svg groups
const graphNode = svg
@@ -158,14 +157,14 @@
.selectAll('g')
.data(data.nodes)
.enter()
- .append('g');
+ .append('g')
// calculate radius
const nodeRadius = (d) => {
- const numOut = index.links[d.id]?.length || 0;
- const numIn = index.backlinks[d.id]?.length || 0;
- return 3 + (numOut + numIn) / 4;
- };
+ const numOut = index.links[d.id]?.length || 0
+ const numIn = index.backlinks[d.id]?.length || 0
+ return 3 + (numOut + numIn) / 4
+ }
// draw individual nodes
const node = graphNode
@@ -176,37 +175,38 @@
.attr('fill', color)
.style('cursor', 'pointer')
.on('click', (_, d) => {
+ // SPA navigation
window.navigate(
new URL(`${baseUrl}${decodeURI(d.id).replace(/\s+/g, '-')}/`),
'.singlePage'
- );
+ )
})
- .on('mouseover', function (_, d) {
+ .on('mouseover', function(_, d) {
d3.selectAll('.node')
.transition()
.duration(100)
- .attr('fill', 'var(--g-node-inactive)');
+ .attr('fill', 'var(--g-node-inactive)')
const neighbours = parseIdsFromLinks([
...(index.links[d.id] || []),
...(index.backlinks[d.id] || []),
- ]);
+ ])
const neighbourNodes = d3
.selectAll('.node')
- .filter((d) => neighbours.includes(d.id));
- const currentId = d.id;
+ .filter((d) => neighbours.includes(d.id))
+ const currentId = d.id
const linkNodes = d3
.selectAll('.link')
- .filter((d) => d.source.id === currentId || d.target.id === currentId);
+ .filter((d) => d.source.id === currentId || d.target.id === currentId)
// highlight neighbour nodes
- neighbourNodes.transition().duration(200).attr('fill', color);
+ neighbourNodes.transition().duration(200).attr('fill', color)
// highlight links
linkNodes
.transition()
.duration(200)
- .attr('stroke', 'var(--g-link-active)');
+ .attr('stroke', 'var(--g-link-active)')
// show text for self
d3.select(this.parentNode)
@@ -214,25 +214,25 @@
.select('text')
.transition()
.duration(200)
- .style('opacity', 1);
+ .style('opacity', 1)
})
- .on('mouseleave', function (_, d) {
- d3.selectAll('.node').transition().duration(200).attr('fill', color);
+ .on('mouseleave', function(_, d) {
+ d3.selectAll('.node').transition().duration(200).attr('fill', color)
- const currentId = d.id;
+ const currentId = d.id
const linkNodes = d3
.selectAll('.link')
- .filter((d) => d.source.id === currentId || d.target.id === currentId);
+ .filter((d) => d.source.id === currentId || d.target.id === currentId)
- linkNodes.transition().duration(200).attr('stroke', 'var(--g-link)');
+ linkNodes.transition().duration(200).attr('stroke', 'var(--g-link)')
d3.select(this.parentNode)
.select('text')
.transition()
.duration(200)
- .style('opacity', 0);
+ .style('opacity', 0)
})
- .call(drag(simulation));
+ .call(drag(simulation))
// draw labels
const labels = graphNode
@@ -245,7 +245,7 @@
.style('pointer-events', 'none')
.style('font-size', '0.4em')
.raise()
- .call(drag(simulation));
+ .call(drag(simulation))
// set panning
@@ -259,13 +259,13 @@
])
.scaleExtent([0.25, 4])
.on('zoom', ({ transform }) => {
- link.attr('transform', transform);
- node.attr('transform', transform);
- const scale = transform.k;
- const scaledOpacity = Math.max((scale - 1) / 3.75, 0);
- labels.attr('transform', transform).style('opacity', scaledOpacity);
+ link.attr('transform', transform)
+ node.attr('transform', transform)
+ const scale = transform.k
+ const scaledOpacity = Math.max((scale - 1) / 3.75, 0)
+ labels.attr('transform', transform).style('opacity', scaledOpacity)
})
- );
+ )
}
// progress the simulation
@@ -274,8 +274,8 @@
.attr('x1', (d) => d.source.x)
.attr('y1', (d) => d.source.y)
.attr('x2', (d) => d.target.x)
- .attr('y2', (d) => d.target.y);
- node.attr('cx', (d) => d.x).attr('cy', (d) => d.y);
- labels.attr('x', (d) => d.x).attr('y', (d) => d.y);
- });
+ .attr('y2', (d) => d.target.y)
+ node.attr('cx', (d) => d.x).attr('cy', (d) => d.y)
+ labels.attr('x', (d) => d.x).attr('y', (d) => d.y)
+ })
}
--
Gitblit v1.10.0