label below nodes, simplify node highlighting
This commit is contained in:
parent
76e9ad1595
commit
90940c8f21
|
@ -6,15 +6,13 @@
|
||||||
stroke-width: 2.5px;
|
stroke-width: 2.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node text {
|
.node text, .label text {
|
||||||
font-size: 11px;
|
font-size: 10px;
|
||||||
fill: #000;
|
fill: #000;
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.link line {
|
.link line {
|
||||||
stroke: #ddd;
|
stroke: #ddd;
|
||||||
stroke-opacity: 1;
|
|
||||||
stroke-width: 5px;
|
stroke-width: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -61,3 +59,7 @@
|
||||||
fill: #ddd;
|
fill: #ddd;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.label rect {
|
||||||
|
fill: rgba(255, 255, 255, 1.0);
|
||||||
|
}
|
||||||
|
|
|
@ -7,14 +7,13 @@
|
||||||
stroke-width: 2.5px;
|
stroke-width: 2.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node text {
|
.node text, .label text {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
fill: #333;
|
fill: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link line {
|
.link line {
|
||||||
stroke: #777;
|
stroke: #777;
|
||||||
stroke-opacity: 1;
|
|
||||||
stroke-width: 2.5px;
|
stroke-width: 2.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -68,3 +67,11 @@
|
||||||
fill: #777;
|
fill: #777;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.label rect {
|
||||||
|
fill: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.label.highlight rect {
|
||||||
|
fill: rgba(255, 255, 100, 0.9);
|
||||||
|
}
|
||||||
|
|
|
@ -12,6 +12,11 @@
|
||||||
stroke-width: 5px;
|
stroke-width: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.faded {
|
||||||
|
stroke-opacity: 0.2;
|
||||||
|
fill-opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
.node.highlight ellipse {
|
.node.highlight ellipse {
|
||||||
fill: #FFF0B3;
|
fill: #FFF0B3;
|
||||||
}
|
}
|
||||||
|
|
|
@ -156,29 +156,29 @@ function isConnected(a, b) {
|
||||||
a.index == b.index
|
a.index == b.index
|
||||||
}
|
}
|
||||||
|
|
||||||
function fade(opacity) {
|
function highlight(b) {
|
||||||
return function(d) {
|
return function(d) {
|
||||||
if (dragging) return
|
if (dragging) return
|
||||||
|
|
||||||
vis.selectAll("g.node")
|
vis.selectAll("g.node")
|
||||||
.style("stroke-opacity", function(o) {
|
.classed("faded", function(o) {
|
||||||
var connected = isConnected(d, o)
|
return !(isConnected(d, o)) && b
|
||||||
|
})
|
||||||
|
.classed("highlight", function(o) {
|
||||||
|
return isConnected(d, o) && b
|
||||||
|
})
|
||||||
|
|
||||||
if (connected && opacity != 1)
|
vis.selectAll("g.label")
|
||||||
d3.select(this)
|
.classed("faded", function(o) {
|
||||||
.classed("highlight", true)
|
return !isConnected(d, o) && b
|
||||||
else
|
})
|
||||||
d3.select(this)
|
.classed("highlight", function(o) {
|
||||||
.classed("highlight", false)
|
return o == d && b
|
||||||
|
})
|
||||||
|
|
||||||
thisOpacity = connected?1:opacity
|
vis.selectAll(".link")
|
||||||
this.setAttribute('fill-opacity', thisOpacity)
|
.classed("faded", function(o) {
|
||||||
return thisOpacity
|
return !(o.source === d || o.target === d) && b
|
||||||
})
|
|
||||||
|
|
||||||
vis.selectAll(".link *")
|
|
||||||
.style("stroke-opacity", function(o) {
|
|
||||||
return o.source === d || o.target === d ? 1 : opacity
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -238,6 +238,8 @@ vis.append("g").attr("class", "links")
|
||||||
|
|
||||||
vis.append("g").attr("class", "nodes")
|
vis.append("g").attr("class", "nodes")
|
||||||
|
|
||||||
|
vis.append("g").attr("class", "labels")
|
||||||
|
|
||||||
var linkedByIndex
|
var linkedByIndex
|
||||||
|
|
||||||
var force = d3.layout.force()
|
var force = d3.layout.force()
|
||||||
|
@ -261,11 +263,11 @@ var force = d3.layout.force()
|
||||||
switch (d.type) {
|
switch (d.type) {
|
||||||
case "vpn": return 0.01
|
case "vpn": return 0.01
|
||||||
case "client": return 1
|
case "client": return 1
|
||||||
default: return 0.5
|
default: return 1
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
force.on("tick", function() {
|
force.on("tick", function(e) {
|
||||||
var size = force.size()
|
var size = force.size()
|
||||||
var nodes = force.nodes()
|
var nodes = force.nodes()
|
||||||
var nl = nodes.length
|
var nl = nodes.length
|
||||||
|
@ -290,6 +292,10 @@ force.on("tick", function() {
|
||||||
vis.selectAll(".node").attr("transform", function(d) {
|
vis.selectAll(".node").attr("transform", function(d) {
|
||||||
return "translate(" + d.x + "," + d.y + ")";
|
return "translate(" + d.x + "," + d.y + ")";
|
||||||
})
|
})
|
||||||
|
|
||||||
|
vis.selectAll(".label").attr("transform", function(d) {
|
||||||
|
return "translate(" + d.x + "," + d.y + ")";
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
var data
|
var data
|
||||||
|
@ -479,6 +485,9 @@ function update() {
|
||||||
|
|
||||||
return true
|
return true
|
||||||
})
|
})
|
||||||
|
.sort(function(a, b) {
|
||||||
|
return (a.flags.client?1:0) < (b.flags.client?1:0)
|
||||||
|
})
|
||||||
|
|
||||||
var node = vis.select("g.nodes")
|
var node = vis.select("g.nodes")
|
||||||
.selectAll("g.node")
|
.selectAll("g.node")
|
||||||
|
@ -493,8 +502,8 @@ function update() {
|
||||||
return d.id
|
return d.id
|
||||||
})
|
})
|
||||||
.attr("class", "node")
|
.attr("class", "node")
|
||||||
.on("mouseover", fade(.2))
|
.on("mouseover", highlight(true))
|
||||||
.on("mouseout", fade(1))
|
.on("mouseout", highlight(false))
|
||||||
.on("click", show_node_info)
|
.on("click", show_node_info)
|
||||||
.call(node_drag)
|
.call(node_drag)
|
||||||
|
|
||||||
|
@ -512,8 +521,7 @@ function update() {
|
||||||
.attr("rx", function(d) {
|
.attr("rx", function(d) {
|
||||||
var r
|
var r
|
||||||
if (d.flags.client) r = 4
|
if (d.flags.client) r = 4
|
||||||
else if (visible.labels) r = Math.max(10, d.name.length * 5)
|
else r = 8
|
||||||
else r = 10
|
|
||||||
|
|
||||||
d.rx = r
|
d.rx = r
|
||||||
|
|
||||||
|
@ -522,30 +530,48 @@ function update() {
|
||||||
.attr("ry", function(d) {
|
.attr("ry", function(d) {
|
||||||
var r
|
var r
|
||||||
if (d.flags.client) r = 4
|
if (d.flags.client) r = 4
|
||||||
else if (visible.labels) r = 10
|
else r = 8
|
||||||
else r = 10
|
|
||||||
|
|
||||||
d.ry = r
|
d.ry = r
|
||||||
|
|
||||||
return r
|
return r
|
||||||
})
|
})
|
||||||
|
|
||||||
nodeEnter.filter(function(d) {
|
var label = vis.select("g.labels")
|
||||||
return !d.flags.client
|
.selectAll("g.label")
|
||||||
|
.data(nodes.filter(function(d) {
|
||||||
|
return !d.flags.client && visible.labels
|
||||||
|
}), function(d) {
|
||||||
|
return d.id
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
var labelEnter = label.enter()
|
||||||
|
.append("g")
|
||||||
|
.attr("id", function (d) {
|
||||||
|
return d.id
|
||||||
})
|
})
|
||||||
.append("text")
|
.attr("class", "label")
|
||||||
|
|
||||||
|
labelEnter.append("rect")
|
||||||
|
.attr("y", "10px")
|
||||||
|
.attr("x", function(d) { return - d.name.length * 7/2 })
|
||||||
|
.attr("width", function(d) { return d.name.length * 7 })
|
||||||
|
.attr("height", "15px")
|
||||||
|
|
||||||
|
labelEnter.append("text")
|
||||||
.attr("class", "name")
|
.attr("class", "name")
|
||||||
.attr("text-anchor", "middle")
|
.attr("text-anchor", "middle")
|
||||||
.attr("y", "4px")
|
.attr("y", "21px")
|
||||||
|
.attr("x", "0px")
|
||||||
|
|
||||||
node.selectAll("text.name")
|
label.selectAll("text.name")
|
||||||
.text(function(d) {
|
.text(function(d) {
|
||||||
if (visible.labels)
|
|
||||||
return d.name
|
return d.name
|
||||||
|
|
||||||
return ""
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
label.exit().remove()
|
||||||
|
|
||||||
nodeEnter.append("title")
|
nodeEnter.append("title")
|
||||||
|
|
||||||
node.selectAll("title")
|
node.selectAll("title")
|
||||||
|
|
Loading…
Reference in a new issue