commit 707e36912ed4634ca0a1fa20ad6cb59c99f30391 Author: Lunar <lunar@torproject.org> Date: Fri Jun 21 15:48:46 2013 +0200 Display node name and bandwidth on mouseover (#6443) --- task-6443/bubble-cw/bubble-cw.html | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/task-6443/bubble-cw/bubble-cw.html b/task-6443/bubble-cw/bubble-cw.html index a47a2d9..9d075fd 100644 --- a/task-6443/bubble-cw/bubble-cw.html +++ b/task-6443/bubble-cw/bubble-cw.html @@ -59,7 +59,18 @@ d3.json("details.json", function(error, data) { .attr("width", function(d) { return d.r * 2; }) .attr("height", function(d) { return d.r * 2; }) .attr("preserveAspectRatio", "xMidYMin") - .attr("filter", function(d) { return d.exit ? "" : "url(#middle-filter)"; }); + .attr("filter", function(d) { return d.exit ? "" : "url(#middle-filter)"; }) + .on("mouseover", function(d) { + svg.append("text") + .attr("transform", "translate(" + diameter + "," + (diameter - legendHeight - 50) + ")") + .attr("id", "relay-bw") + .style("text-anchor", "end") + .style("font-size", "14pt") + .text(d.className.substring(0, 20) + ": " + (d.bandwidth * 8.0 / 1000.0 / 1000.0).toFixed(2) + " Mbit/s"); + }) + .on("mouseout", function() { + d3.select("#relay-bw").remove(); + }); var title = svg.append("g") .attr("transform", "translate(" + (diameter / 3) +", " + (diameter - 30) + ")");