Mirrors/yacy_search_server
1
0
Fork 0
mirror of https://github.com/yacy/yacy_search_server.git synced 2025-06-22 04:16:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

Limit length of initially visible text in link structure graph nodes

Browse Source 
To improve a bit readability of graphs having a large number of nodes.
This commit is contained in:
luccioman
2018-10-31 07:43:42 +01:00
parent 5a8d9abd8a
commit 260ac11c65
2 changed files with 28 additions and 2 deletions

18
htroot/env/hypertree.css vendored

@ -32,6 +32,22 @@ circle {
}
text {
font: 9px sans-serif;
pointer-events: none;
cursor: default;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
text tspan.truncated {
display: none;
}
text:hover tspan.truncated {
display: inherit;
}
text tspan.ellipsis {
display: inherit;
}
text:hover tspan.ellipsis {
display: none;
}

12
htroot/js/hypertree.js

@ -64,10 +64,20 @@ function linkstructure(hostname, element, width, height, maxtime, maxnodes) {
.attr("class",function(d) {return "hypertree-link " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")";});
var circle = svg.append("g").selectAll("circle").data(simulation.nodes()).enter().append("circle").attr("r", 4).call(d3.drag());
var maxTextLength = 40;
var text = svg.append("g")
.selectAll("text").data(simulation.nodes()).enter().append("text").attr("x", 8).attr("y", ".31em")
.attr("style", function(d) {return d.type == "Outbound" ? "fill:#888888;" : "fill:#000000;";})
.text(function(d) {return d.name;});
.text(function(d) {/* Limit the length of nodes visible text to improve readability */ return d.name.substring(0, Math.min(d.name.length, maxTextLength));});
text.append("tspan")
.attr("class", "truncated")
.text(function(d) {/* The end of large texts is wraped in a tspan, made visible on mouse overing */return d.name.length > maxTextLength ? d.name.substring(maxTextLength) : ""});
text.append("tspan")
.attr("class", "ellipsis")
.text(function(d) {/* Add an ellipsis to mark long texts that are truncated */ return d.name.length > maxTextLength ? "..." : ""});
function ticked() {
path.attr("d", linkArc);
circle.attr("transform", transform);