The Trans Directory
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

+28 -11
+22 -11
assets/js/graph.js
··· 70 70 .on("end", enableDrag ? dragended : noop); 71 71 } 72 72 73 - const height = 250 73 + const height = Math.max(document.getElementById("graph-container").offsetHeight, 250) 74 74 const width = document.getElementById("graph-container").offsetWidth 75 75 76 76 const simulation = d3.forceSimulation(data.nodes) 77 77 .force("charge", d3.forceManyBody().strength(-30)) 78 - .force("link", d3.forceLink(data.links).id(d => d.id)) 78 + .force("link", d3.forceLink(data.links).id(d => d.id).distance(40)) 79 79 .force("center", d3.forceCenter()); 80 80 81 81 const svg = d3.select('#graph-container') ··· 115 115 .data(data.nodes) 116 116 .enter().append("g") 117 117 118 + // calculate radius 119 + const nodeRadius = (d) => { 120 + const numOut = index.links[d.id]?.length || 0 121 + const numIn = index.backlinks[d.id]?.length || 0 122 + return 3 + (numOut + numIn) / 4 123 + } 124 + 118 125 // draw individual nodes 119 126 const node = graphNode.append("circle") 120 127 .attr("class", "node") 121 128 .attr("id", (d) => d.id) 122 - .attr("r", (d) => { 123 - const numOut = index.links[d.id]?.length || 0 124 - const numIn = index.backlinks[d.id]?.length || 0 125 - return 3 + (numOut + numIn) / 4 126 - }) 129 + .attr("r", nodeRadius) 127 130 .attr("fill", color) 128 131 .style("cursor", "pointer") 129 132 .on("click", (_, d) => { ··· 154 157 155 158 // show text for self 156 159 d3.select(this.parentNode) 157 - .select("text") 158 160 .raise() 161 + .select("text") 159 162 .transition() 160 163 .duration(200) 161 164 .style("opacity", 1) 165 + .raise() 162 166 }).on("mouseleave", function(_, d) { 163 167 d3.selectAll(".node") 164 168 .transition() ··· 183 187 184 188 // draw labels 185 189 const labels = graphNode.append("text") 186 - .attr("dx", 12) 187 - .attr("dy", ".35em") 190 + .attr("dx", 0) 191 + .attr("dy", d => nodeRadius(d) + 8 + "px") 192 + .attr("text-anchor", "middle") 188 193 .text((d) => content[d.id]?.title || d.id.replace("-", " ")) 189 194 .style("opacity", 0) 190 195 .style("pointer-events", "none") 196 + .style("font-size", "0.4em") 197 + .raise() 191 198 .call(drag(simulation)); 192 199 193 200 // set panning ··· 199 206 .on("zoom", ({ transform }) => { 200 207 link.attr("transform", transform); 201 208 node.attr("transform", transform); 202 - labels.attr("transform", transform); 209 + const scale = transform.k 210 + const scaledOpacity = Math.max((scale - 1) / 3.75, 0) 211 + labels 212 + .attr("transform", transform) 213 + .style("opacity", scaledOpacity) 203 214 })); 204 215 } 205 216
+6
assets/styles/base.scss
··· 329 329 & #graph-container { 330 330 border: var(--outlinegray) 1px solid; 331 331 border-radius: 5px; 332 + box-sizing: border-box; 333 + 334 + & > svg { 335 + margin-bottom: -5px; 336 + 337 + } 332 338 } 333 339 } 334 340