tomoyanonymous/quartz-research-note
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Improve graph display, options and ability to have a global graph on the home page, local graphs on subpage.

Browse Source
This commit is contained in:
DhammaCharts
2022-06-01 13:49:27 +01:00
parent 84c6e1efed
commit 5a1fbc9374
5 changed files with 129 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
assets/js/graph.js
View File

@@ -1,4 +1,16 @@
async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, enableZoom) {
async function drawGraph(
baseUrl,
pathColors,
depth,
enableDrag,
enableLegend,
enableZoom,
isHome,
opacityScale,
scale,
repelForce,
fontSize
) {
const container = document.getElementById("graph-container")
const { index, links, content } = await fetchData
@@ -82,12 +94,12 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e
.on("end", enableDrag ? dragended : noop)
}
const height = Math.max(container.offsetHeight, 250)
const height = Math.max(container.offsetHeight, isHome ? 500 : 250)
const width = container.offsetWidth
const simulation = d3
.forceSimulation(data.nodes)
.force("charge", d3.forceManyBody().strength(-30))
.force("charge", d3.forceManyBody().strength(-100 * repelForce))
.force(
"link",
d3
@@ -102,7 +114,7 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e
.append("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [-width / 2, -height / 2, width, height])
.attr('viewBox', [-width / 2 * 1 / scale, -height / 2 * 1 / scale, width * 1 / scale, height * 1 / scale])
if (enableLegend) {
const legend = [{ Current: "var(--g-node-active)" }, { Note: "var(--g-node)" }, ...pathColors]
@@ -168,7 +180,7 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e
])
const neighbourNodes = d3.selectAll(".node").filter((d) => neighbours.includes(d.id))
const currentId = d.id
window.Million.prefetch(new URL(`${baseUrl}${decodeURI(d.id).replace(/\s+/g, "-")}/`))
// window.Million.prefetch(new URL(`${baseUrl}${decodeURI(d.id).replace(/\s+/g, "-")}/`))
const linkNodes = d3
.selectAll(".link")
.filter((d) => d.source.id === currentId || d.target.id === currentId)
@@ -179,13 +191,18 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e
// highlight links
linkNodes.transition().duration(200).attr("stroke", "var(--g-link-active)")
const bigFont = fontSize+0.5
// show text for self
d3.select(this.parentNode)
.raise()
.select("text")
.transition()
.duration(200)
.style("opacity", 1)
.attr('opacityOld', d3.select(this.parentNode).select('text').style("opacity"))
.style('opacity', 1)
.style('font-size', bigFont+'em')
.attr('dy', d => nodeRadius(d) + 20 + 'px') // radius is in px
})
.on("mouseleave", function (_, d) {
d3.selectAll(".node").transition().duration(200).attr("fill", color)
@@ -197,7 +214,13 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e
linkNodes.transition().duration(200).attr("stroke", "var(--g-link)")
d3.select(this.parentNode).select("text").transition().duration(200).style("opacity", 0)
d3.select(this.parentNode)
.select("text")
.transition()
.duration(200)
.style('opacity', d3.select(this.parentNode).select('text').attr("opacityOld"))
.style('font-size', fontSize+'em')
.attr('dy', d => nodeRadius(d) + 8 + 'px') // radius is in px
})
.call(drag(simulation))
@@ -208,9 +231,9 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e
.attr("dy", (d) => nodeRadius(d) + 8 + "px")
.attr("text-anchor", "middle")
.text((d) => content[d.id]?.title || d.id.replace("-", " "))
.style("opacity", 0)
.style('opacity', (opacityScale - 1) / 3.75)
.style("pointer-events", "none")
.style("font-size", "0.4em")
.style('font-size', fontSize+'em')
.raise()
.call(drag(simulation))
@@ -228,7 +251,7 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e
.on("zoom", ({ transform }) => {
link.attr("transform", transform)
node.attr("transform", transform)
const scale = transform.k
const scale = transform.k * opacityScale;
const scaledOpacity = Math.max((scale - 1) / 3.75, 0)
labels.attr("transform", transform).style("opacity", scaledOpacity)
}),