Overlay-Kreis, text, etc. über d3.js multi-Linien Serie

Habe ich die multi-series line-chart code mit leichten Modifikationen, um meine Daten. Dies ist, was ich Wünsche zu tun, und keine Lösung habe ich angeschaut, scheint richtig zu funktionieren für mich. Ich möchte overlay-element (Kreis, rectange, ausgeblendet, je nachdem, welcher) über jedem Punkt auf der Linie, so dass ich konnte fügen Sie dann einen mouseover-element in diesem Punkt ein Feld angezeigt, mit Daten mit der d....Zeit, d....jobID und wie viel, das unterscheidet sich von einem durchschnittlichen. Wenn möglich, möchte ich die Lösung nur tun dies, um die Haupt-Linie (die unterschiedliche Linie) eher als die zwei gezeichneten Linien repräsentieren den Mittelwert. Hier habe ich ein Bild von der Grafik wie Sie ist für die visuelle Inspektion. Wenn das nicht funktioniert, habe ich auch befestigt.

Ich habe ein wenig den code unten.

d3.tsv("values.tsv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "time" && key !==   "jobID"; }));

data.forEach(function(d) {
  d.time = parseDate(d.time);
  d.jobID = parseInt(d.jobID);
});

var points = color.domain().map(function(name) {
return {
  name: name,
  values: data.map(function(d) {
    return {time: d.time, jobID: d.jobID, value: parseFloat(d[name],10)};
  })
};
});

....

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 7)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("mbps");

var point = svg.selectAll(".point")
  .data(points)
.enter().append("g")
  .attr("class", "point");

point.append("path")
  .attr("class", "line")
  .attr("d", function(d) { return line(d.values); })
  .style("stroke", function(d) { return color(d.name); });

point.append("text")
  .datum(function(d) { return {name: d.name, jobID: d.jobID, value: d.values[d.values.length - 1]}; })
  .attr("transform", function(d) { return "translate(" + x(d.value.time) + "," + y(d.value.value) + ")"; })
  .attr("x", 6)
  .attr("dy", ".7em")
  .text(function(d) { return d.name; });
});

Ich habe bereits versucht den folgenden code, nur um zu sehen, ob es geklappt hat mit meiner Implementierung:

point.append("svg:circle")
     .attr("stroke", "black")
     .attr("fill", function(d, i) { return "black" })
     .attr("cx", function(d, i) { return x(d.time) })
     .attr("cy", function(d, i) { return y(d.value) })
     .attr("r", function(d, i) { return 3 });

Danke Euch allen für Eure Hilfe im Voraus. D3.JS scheint ein ziemlich awesome Stück Arbeit, und ich bin glücklich, es zu haben.

EDIT: jsfiddle