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
  1. 0

    Was meinst du mit tooltip ? Ist es das Fenster, das erscheint, wenn wir bewegen Sie die Maus über Punkte ? Sie scheinen gut. Was ich sehen kann ist, dass Sie Ihre Punkte nicht bewegen, während die Zeilen sind, und wenn ich raten müsste würde ich sagen, deine eingeben und aktualisieren Auswahlen sind gemischt. Wenn die Punkte sind bereits auf dem Bildschirm, und Sie aktualisieren möchten Ihre position (durch Aufruf Ihrer Methode update), sollten Sie etwas entlang diesen Linien :

    //Bind your data
topicEnter.append("g").selectAll(".dot")
    .data(function (d) { return d.values })
//Enter selection
topicEnter.enter().append("circle").attr("clip-path", "url(#clip)").attr("class", "dot");
//Update all the dots
topicEnter.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);
    })
    [...]
    • Ja, ich meinte die Kreise, die die tooltips, sorry. Das ist das problem, und ich bin versucht zu tun, was Sie sagte, aber es funktioniert immer noch nicht. Es scheint, dass zunächst die neuen Punkte nicht verschwinden werden und nur die neue (rote) Linie die Kreise in der richtigen Stelle. Sobald Sie anfangen zu spielen um auf dem Graphen der Fokus-und Kontext-Schieberegler an der Unterseite, die alten Kreise mit inzwischen veralteten x-Achse verschwinden, aber neue Kreise haben die falsche y-Achse, aber wenigstens an der richtigen x-Achse.
    InformationsquelleAutor Barnabé Monnot
Schreibe einen Kommentar