Skip to content
Permalink
Browse files

Limit length of initially visible text in link structure graph nodes

To improve a bit readability of graphs having a large number of nodes.
  • Loading branch information...
luccioman committed Oct 31, 2018
1 parent 5a8d9ab commit 260ac11c65d0ca0cb1ab72f56d5aaa9a1ac59e32
Showing with 28 additions and 2 deletions.
  1. +17 −1 htroot/env/hypertree.css
  2. +11 −1 htroot/js/hypertree.js
@@ -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;
}
@@ -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);

0 comments on commit 260ac11

Please sign in to comment.
You can’t perform that action at this time.