Merge pull request #140 from DhammaCharts/hugo

This commit is contained in:
Jacky Zhao 2022-06-07 08:43:52 -07:00 committed by GitHub
commit 4faa0205a7
6 changed files with 107 additions and 24 deletions

View File

@ -1,4 +1,15 @@
async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, enableZoom) { async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
let {
depth,
enableDrag,
enableLegend,
enableZoom,
opacityScale,
scale,
repelForce,
fontSize} = graphConfig;
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 +93,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 +113,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]
@ -179,13 +190,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*1.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 +213,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 +230,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 +250,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,37 @@
# 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: false
### Local Graph ###
localGraph:
enableLegend: false
enableDrag: true
enableZoom: true
depth: 1 # set to -1 to show full graph
scale: 1.2
repelForce: 2
centerForce: 1
linkDistance: 1
fontSize: 0.6
opacityScale: 3
### Global Graph ###
globalGraph:
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.4
repelForce: 1
centerForce: 1
linkDistance: 1
fontSize: 0.5
opacityScale: 3
### For all 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,24 @@
{{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

@ -59,6 +59,12 @@
const render = () => { const render = () => {
// 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, adds event listeners, etc. If you are only dealing with basic DOM replacement, use the init function // 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, adds event listeners, etc. If you are only dealing with basic DOM replacement, use the init function
const siteBaseURL = new URL({{$.Site.BaseURL}});
const pathBase = siteBaseURL.pathname;
const pathWindow = window.location.pathname;
const isHome = pathBase == pathWindow;
{{if $.Site.Data.config.enableFooter}} {{if $.Site.Data.config.enableFooter}}
const container = document.getElementById("graph-container") const container = document.getElementById("graph-container")
// retry if the graph is not ready // retry if the graph is not ready
@ -66,14 +72,14 @@
// clear the graph in case there is anything within it // clear the graph in case there is anything within it
container.textContent = "" container.textContent = ""
const drawGlobal = isHome && {{$.Site.Data.graphConfig.enableGlobalGraph}};
drawGraph( drawGraph(
{{strings.TrimRight "/" .Site.BaseURL}}, {{strings.TrimRight "/" .Site.BaseURL}},
drawGlobal,
{{$.Site.Data.graphConfig.paths}}, {{$.Site.Data.graphConfig.paths}},
{{$.Site.Data.graphConfig.depth}}, drawGlobal ? {{$.Site.Data.graphConfig.globalGraph}} : {{$.Site.Data.graphConfig.localGraph}}
{{$.Site.Data.graphConfig.enableDrag}},
{{$.Site.Data.graphConfig.enableLegend}},
{{$.Site.Data.graphConfig.enableZoom}}
); );
{{end}} {{end}}
{{if $.Site.Data.config.enableLinkPreview}} {{if $.Site.Data.config.enableLinkPreview}}