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