The Trans Directory
feat: show graph titles on zoom (fixes #92)
+28
-11
+22
-11
assets/js/graph.js
+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