nodeinfo box
This commit is contained in:
parent
56cae839bc
commit
eb67713db7
|
@ -20,8 +20,33 @@ line.link {
|
|||
|
||||
#chart {
|
||||
background-image: url(gplaypattern.png);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.node.highlight ellipse {
|
||||
fill: #FFF0B3;
|
||||
}
|
||||
|
||||
#nodeinfo {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
padding: 0.5em;
|
||||
font-family: arial, helvatica;
|
||||
}
|
||||
|
||||
#nodeinfo h1, p {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
#nodeinfo h1 {
|
||||
font-size: 10pt;
|
||||
margin: 0 0 0.5em;
|
||||
}
|
||||
|
||||
#nodeinfo p {
|
||||
font-size: 10pt;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
@ -73,6 +73,23 @@ d3.json("nodes.json", function(json) {
|
|||
});
|
||||
};
|
||||
}
|
||||
|
||||
function show_node_info(d) {
|
||||
if (!(typeof nodeinfo === 'undefined'))
|
||||
nodeinfo.remove();
|
||||
|
||||
nodeinfo = d3.select("#chart").append("div")
|
||||
.attr("id", "nodeinfo");
|
||||
|
||||
nodeinfo.append("h1")
|
||||
.text(d.name);
|
||||
|
||||
nodeinfo.append("p")
|
||||
.text(d.macs);
|
||||
|
||||
nodeinfo.append("p")
|
||||
.text(d.gps);
|
||||
}
|
||||
|
||||
var node = vis.selectAll("svg.node")
|
||||
.data(json.nodes)
|
||||
|
@ -80,6 +97,7 @@ d3.json("nodes.json", function(json) {
|
|||
.attr("class", "node")
|
||||
.on("mouseover", fade(.2))
|
||||
.on("mouseout", fade(1))
|
||||
.on("click", show_node_info)
|
||||
.call(force.drag);
|
||||
|
||||
node.append("ellipse")
|
||||
|
|
Loading…
Reference in a new issue