D3 Multiline-Grafik mit Tooltip-Übergang Problem

Ich habe mit d3 zum erstellen einer mehrzeiligen Diagramm mit der Fokus-und Kontext-Bürsten. Alles läuft gut außer auf den übergang der Punkte an die Datenpunkte mit den tooltips bewegen sich auf einer völlig falschen position. Ich kann nicht herausfinden, was ist die Ursache HIERFÜR. Jede Hilfe wäre sehr geschätzt werden. Ich legte den vollständigen code hier ein und vermerkt auf dem Diagramm, wo ich bin ziemlich sicher, dass der Fehler soll sein:

http://jsbin.com/osumaq/20/edit

Wenn die Schaltfläche geklickt wird, wird eine neue json übergeben wird, das Diagramm zu Lesen.

Den buggy-block-code, den ich denke, ist dies:

topicEnter.append("g").selectAll(".dot")
.data(function (d) { return d.values }).enter().append("circle").attr("clip-path", "url(#clip)")
.attr("stroke", function (d) {
return color(this.parentNode.__data__.name)
})
.attr("cx", function (d) {
return x(d.date);
})
.attr("cy", function (d) {
return y(d.probability);
})
.attr("r", 5)
.attr("fill", "white").attr("fill-opacity", .5)
.attr("stroke-width", 2).on("mouseover", function (d) {
div.transition().duration(100).style("opacity", .9);
div.html(this.parentNode.__data__.name + "<br/>" + d.probability).style("left", (d3.event.pageX) + "px").style("top", (d3.event.pageY - 28) + "px").attr('r', 8);
d3.select(this).attr('r', 8)
}).on("mouseout", function (d) {
div.transition().duration(100).style("opacity", 0)
d3.select(this).attr('r', 5);
});

Danke Ihnen sehr.

InformationsquelleAutor nleazer | 2013-08-27
Schreibe einen Kommentar