diff --git a/html/force.css b/html/force.css
index c3a5cd7..fe5b176 100644
--- a/html/force.css
+++ b/html/force.css
@@ -23,6 +23,11 @@ line.link {
position: relative;
}
+.node.marked ellipse {
+ stroke: #C83771 !important;
+ stroke-width: 5px;
+}
+
.node.highlight ellipse {
fill: #FFF0B3;
}
diff --git a/html/force.js b/html/force.js
index e9e17d5..d28a4d5 100644
--- a/html/force.js
+++ b/html/force.js
@@ -34,6 +34,25 @@ btns.append("button")
.text("nur Mesh")
.on("click", update_graph);
+cp.append("label")
+ .text("Knoten hervorheben:");
+
+cp.append("br");
+
+cp.append("input")
+ .on("keyup", function(){show_node(this.value)})
+ .on("change", function(){show_node(this.value)});
+
+function show_node(mac) {
+ d3.selectAll("#chart .node").classed("marked", false);
+ d3.selectAll("#chart .node").each( function(d) {
+ if (d.id == mac)
+ d3.select(this).classed("marked", true);
+ })
+}
+
+var hashstr = window.location.hash.substring(1);
+
function update_graph() {
var value = jQuery(this).val()
@@ -213,5 +232,7 @@ function render_graph(type) {
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
+ show_node(hashstr);
});
+
}