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

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

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 container = document.getElementById("graph-container")
const { index, links, content } = await fetchData const { index, links, content } = await fetchData
@ -82,12 +94,12 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e
.on("end", enableDrag ? dragended : noop) .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 width = container.offsetWidth
const simulation = d3 const simulation = d3
.forceSimulation(data.nodes) .forceSimulation(data.nodes)
.force("charge", d3.forceManyBody().strength(-30)) .force("charge", d3.forceManyBody().strength(-100 * repelForce))
.force( .force(
"link", "link",
d3 d3
@ -102,7 +114,7 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e
.append("svg") .append("svg")
.attr("width", width) .attr("width", width)
.attr("height", height) .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) { if (enableLegend) {
const legend = [{ Current: "var(--g-node-active)" }, { Note: "var(--g-node)" }, ...pathColors] 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 neighbourNodes = d3.selectAll(".node").filter((d) => neighbours.includes(d.id))
const currentId = 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 const linkNodes = d3
.selectAll(".link") .selectAll(".link")
.filter((d) => d.source.id === currentId || d.target.id === currentId) .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 // highlight links
linkNodes.transition().duration(200).attr("stroke", "var(--g-link-active)") linkNodes.transition().duration(200).attr("stroke", "var(--g-link-active)")
const bigFont = fontSize+0.5
// show text for self // show text for self
d3.select(this.parentNode) d3.select(this.parentNode)
.raise() .raise()
.select("text") .select("text")
.transition() .transition()
.duration(200) .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) { .on("mouseleave", function (_, d) {
d3.selectAll(".node").transition().duration(200).attr("fill", color) 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)") 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)) .call(drag(simulation))
@ -208,9 +231,9 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e
.attr("dy", (d) => nodeRadius(d) + 8 + "px") .attr("dy", (d) => nodeRadius(d) + 8 + "px")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.text((d) => content[d.id]?.title || d.id.replace("-", " ")) .text((d) => content[d.id]?.title || d.id.replace("-", " "))
.style("opacity", 0) .style('opacity', (opacityScale - 1) / 3.75)
.style("pointer-events", "none") .style("pointer-events", "none")
.style("font-size", "0.4em") .style('font-size', fontSize+'em')
.raise() .raise()
.call(drag(simulation)) .call(drag(simulation))
@ -228,7 +251,7 @@ async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, e
.on("zoom", ({ transform }) => { .on("zoom", ({ transform }) => {
link.attr("transform", transform) link.attr("transform", transform)
node.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) const scaledOpacity = Math.max((scale - 1) / 3.75, 0)
labels.attr("transform", transform).style("opacity", scaledOpacity) labels.attr("transform", transform).style("opacity", scaledOpacity)
}), }),

View File

@ -1,6 +1,35 @@
# if true, a Global Graph will be shown on home page with full width, no backlink.
# A different set of Local Graphs will be shown on sub pages.
# if false, Local Graph will be default on every page as usual
enableGlobalGraph: true
### Local Graph ###
enableLegend: false enableLegend: false
enableDrag: true enableDrag: true
enableZoom: true enableZoom: true
depth: -1 # set to -1 to show full graph depth: 1 # set to -1 to show full graph
scale: 1
repelForce: 2
centerForce: 1
linkDistance: 1
fontSize: 0.6
opacityScale: 3
### Global Graph ###
enableLegendGG: false
enableDragGG: true
enableZoomGG: true
depthGG: -1 # set to -1 to show full graph
scaleGG: 1.2
repelForceGG: 1
centerForceGG: 1
linkDistanceGG: 1
fontSizeGG: 0.5
opacityScaleGG: 3
### Graphs ###
paths: paths:
- /moc: "#4388cc" - /moc: "#4388cc"

View File

@ -19,7 +19,7 @@
{{partial "recent.html" . }} {{partial "recent.html" . }}
{{end}} {{end}}
</article> </article>
{{partial "footer.html" .}} {{partial "footerIndex.html" .}}
</div> </div>
</body> </body>
</html> </html>

View File

@ -0,0 +1,28 @@
<hr/>
{{if $.Site.Data.config.enableFooter}}
{{if $.Site.Data.graphConfig.enableGlobalGraph}}
<div class="page-end">
<div>
{{partial "graph.html" .}}
</div>
</div>
{{else}}
<hr/>
<div class="page-end">
<div class="backlinks-container">
{{partial "backlinks.html" .}}
</div>
<div>
{{partial "graph.html" .}}
</div>
</div>
{{end}}
{{end}}
{{partial "contact.html" .}}

View File

@ -62,6 +62,12 @@
})) }))
const draw = () => { const draw = () => {
const siteBaseURL = new URL({{$.Site.BaseURL}});
const pathBase = siteBaseURL.pathname;
const pathWindow = window.location.pathname;
const isHome = pathBase == pathWindow ? true : false;
// NOTE: everything within this callback will be executed for every page navigation. This is a good place to put JavaScript that loads or modifies data on the page. // NOTE: everything within this callback will be executed for every page navigation. This is a good place to put JavaScript that loads or modifies data on the page.
{{if $.Site.Data.config.enableFooter}} {{if $.Site.Data.config.enableFooter}}
const container = document.getElementById("graph-container") const container = document.getElementById("graph-container")
@ -70,14 +76,36 @@
// clear the graph in case there is anything within it // clear the graph in case there is anything within it
container.textContent = "" container.textContent = ""
drawGraph( if (isHome && {{$.Site.Data.graphConfig.enableGlobalGraph}}) {
{{strings.TrimRight "/" .Site.BaseURL}}, drawGraph(
{{$.Site.Data.graphConfig.paths}}, {{strings.TrimRight "/" .Site.BaseURL}},
{{$.Site.Data.graphConfig.depth}}, {{$.Site.Data.graphConfig.paths}},
{{$.Site.Data.graphConfig.enableDrag}}, {{$.Site.Data.graphConfig.depthGG}},
{{$.Site.Data.graphConfig.enableLegend}}, {{$.Site.Data.graphConfig.enableDragGG}},
{{$.Site.Data.graphConfig.enableZoom}} {{$.Site.Data.graphConfig.enableLegendGG}},
); {{$.Site.Data.graphConfig.enableZoomGG}},
true,
{{$.Site.Data.graphConfig.opacityScaleGG}},
{{$.Site.Data.graphConfig.scaleGG}},
{{$.Site.Data.graphConfig.repelForceGG}},
{{$.Site.Data.graphConfig.fontSizeGG}}
);
} else {
drawGraph(
{{strings.TrimRight "/" .Site.BaseURL}},
{{$.Site.Data.graphConfig.paths}},
{{$.Site.Data.graphConfig.depth}},
{{$.Site.Data.graphConfig.enableDrag}},
{{$.Site.Data.graphConfig.enableLegend}},
{{$.Site.Data.graphConfig.enableZoom}},
false,
{{$.Site.Data.graphConfig.opacityScale}},
{{$.Site.Data.graphConfig.scale}},
{{$.Site.Data.graphConfig.repelForce}},
{{$.Site.Data.graphConfig.fontSize}}
);
}
{{end}} {{end}}
{{if $.Site.Data.config.enableLinkPreview}} {{if $.Site.Data.config.enableLinkPreview}}
initPopover( initPopover(