From 87b5a7a2519c70b6f6e678c6b86a3aefc4dd3218 Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Thu, 28 Apr 2022 15:49:16 -0700 Subject: [PATCH] feat: show graph titles on zoom (fixes #92) --- assets/js/graph.js | 33 ++++++++++++++++++++++----------- assets/styles/base.scss | 6 ++++++ 2 files changed, 28 insertions(+), 11 deletions(-) diff --git a/assets/js/graph.js b/assets/js/graph.js index 08c97e9..db2a171 100644 --- a/assets/js/graph.js +++ b/assets/js/graph.js @@ -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) })); } diff --git a/assets/styles/base.scss b/assets/styles/base.scss index 0c7d957..4d03a06 100644 --- a/assets/styles/base.scss +++ b/assets/styles/base.scss @@ -329,6 +329,12 @@ hr { & #graph-container { border: var(--outlinegray) 1px solid; border-radius: 5px; + box-sizing: border-box; + + & > svg { + margin-bottom: -5px; + + } } }