nodeinfo box
This commit is contained in:
parent
56cae839bc
commit
eb67713db7
|
@ -20,8 +20,33 @@ line.link {
|
||||||
|
|
||||||
#chart {
|
#chart {
|
||||||
background-image: url(gplaypattern.png);
|
background-image: url(gplaypattern.png);
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node.highlight ellipse {
|
.node.highlight ellipse {
|
||||||
fill: #FFF0B3;
|
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;
|
||||||
|
}
|
||||||
|
|
|
@ -74,12 +74,30 @@ 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")
|
var node = vis.selectAll("svg.node")
|
||||||
.data(json.nodes)
|
.data(json.nodes)
|
||||||
.enter().append("g")
|
.enter().append("g")
|
||||||
.attr("class", "node")
|
.attr("class", "node")
|
||||||
.on("mouseover", fade(.2))
|
.on("mouseover", fade(.2))
|
||||||
.on("mouseout", fade(1))
|
.on("mouseout", fade(1))
|
||||||
|
.on("click", show_node_info)
|
||||||
.call(force.drag);
|
.call(force.drag);
|
||||||
|
|
||||||
node.append("ellipse")
|
node.append("ellipse")
|
||||||
|
|
Loading…
Reference in a new issue