alrayyes/wiki
1
0
Fork 0
mirror of https://github.com/alrayyes/wiki.git synced 2024-11-22 11:36:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: show graph titles on zoom (fixes #92)

Browse source
This commit is contained in:
Jacky Zhao 2022-04-28 15:49:16 -07:00
parent c8d390dbc5
commit 87b5a7a251
2 changed files with 28 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
assets/js/graph.js
View file

@ -70,12 +70,12 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
.on("end", enableDrag ? dragended : noop);
}
const height = 250
const height = Math.max(document.getElementById("graph-container").offsetHeight, 250)
const width = document.getElementById("graph-container").offsetWidth
const simulation = d3.forceSimulation(data.nodes)
.force("charge", d3.forceManyBody().strength(-30))
.force("link", d3.forceLink(data.links).id(d => d.id))
.force("link", d3.forceLink(data.links).id(d => d.id).distance(40))
.force("center", d3.forceCenter());
const svg = d3.select('#graph-container')
@ -115,15 +115,18 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
.data(data.nodes)
.enter().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
}
// draw individual nodes
const node = graphNode.append("circle")
.attr("class", "node")
.attr("id", (d) => d.id)
.attr("r", (d) => {
const numOut = index.links[d.id]?.length || 0
const numIn = index.backlinks[d.id]?.length || 0
return 3 + (numOut + numIn) / 4
})
.attr("r", nodeRadius)
.attr("fill", color)
.style("cursor", "pointer")
.on("click", (_, d) => {
@ -154,11 +157,12 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
// show text for self
d3.select(this.parentNode)
.select("text")
.raise()
.select("text")
.transition()
.duration(200)
.style("opacity", 1)
.raise()
}).on("mouseleave", function(_, d) {
d3.selectAll(".node")
.transition()
@ -183,11 +187,14 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
// draw labels
const labels = graphNode.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.attr("dx", 0)
.attr("dy", d => nodeRadius(d) + 8 + "px")
.attr("text-anchor", "middle")
.text((d) => content[d.id]?.title || d.id.replace("-", " "))
.style("opacity", 0)
.style("pointer-events", "none")
.style("font-size", "0.4em")
.raise()
.call(drag(simulation));
// set panning
@ -199,7 +206,11 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
.on("zoom", ({ transform }) => {
link.attr("transform", transform);
node.attr("transform", transform);
labels.attr("transform", transform);
const scale = transform.k
const scaledOpacity = Math.max((scale - 1) / 3.75, 0)
labels
.attr("transform", transform)
.style("opacity", scaledOpacity)
}));
}

6
assets/styles/base.scss
View file

@ -329,6 +329,12 @@ hr {
& #graph-container {
border: var(--outlinegray) 1px solid;
border-radius: 5px;
box-sizing: border-box;
& > svg {
margin-bottom: -5px;
}
}
}