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

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 b09df08e07
commit 92d5e5bd3b
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); .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 width = document.getElementById("graph-container").offsetWidth
const simulation = d3.forceSimulation(data.nodes) const simulation = d3.forceSimulation(data.nodes)
.force("charge", d3.forceManyBody().strength(-30)) .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()); .force("center", d3.forceCenter());
const svg = d3.select('#graph-container') const svg = d3.select('#graph-container')
@ -115,15 +115,18 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
.data(data.nodes) .data(data.nodes)
.enter().append("g") .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 // draw individual nodes
const node = graphNode.append("circle") const node = graphNode.append("circle")
.attr("class", "node") .attr("class", "node")
.attr("id", (d) => d.id) .attr("id", (d) => d.id)
.attr("r", (d) => { .attr("r", nodeRadius)
const numOut = index.links[d.id]?.length || 0
const numIn = index.backlinks[d.id]?.length || 0
return 3 + (numOut + numIn) / 4
})
.attr("fill", color) .attr("fill", color)
.style("cursor", "pointer") .style("cursor", "pointer")
.on("click", (_, d) => { .on("click", (_, d) => {
@ -154,11 +157,12 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
// show text for self // show text for self
d3.select(this.parentNode) d3.select(this.parentNode)
.select("text")
.raise() .raise()
.select("text")
.transition() .transition()
.duration(200) .duration(200)
.style("opacity", 1) .style("opacity", 1)
.raise()
}).on("mouseleave", function(_, d) { }).on("mouseleave", function(_, d) {
d3.selectAll(".node") d3.selectAll(".node")
.transition() .transition()
@ -183,11 +187,14 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
// draw labels // draw labels
const labels = graphNode.append("text") const labels = graphNode.append("text")
.attr("dx", 12) .attr("dx", 0)
.attr("dy", ".35em") .attr("dy", d => nodeRadius(d) + 8 + "px")
.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", 0)
.style("pointer-events", "none") .style("pointer-events", "none")
.style("font-size", "0.4em")
.raise()
.call(drag(simulation)); .call(drag(simulation));
// set panning // set panning
@ -199,7 +206,11 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
.on("zoom", ({ transform }) => { .on("zoom", ({ transform }) => {
link.attr("transform", transform); link.attr("transform", transform);
node.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 { & #graph-container {
border: var(--outlinegray) 1px solid; border: var(--outlinegray) 1px solid;
border-radius: 5px; border-radius: 5px;
box-sizing: border-box;
& > svg {
margin-bottom: -5px;
}
} }
} }