nodeinfo box

This commit is contained in:
Nils Schneider 2012-06-03 17:17:48 +02:00
parent 56cae839bc
commit eb67713db7
2 changed files with 43 additions and 0 deletions

View file

@ -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;
}

View file

@ -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")