Problem mit überlappenden Toolitp d3.js

Question

Ich habe this is a very helpful example gefunden, Tooltip in Liniendiagrammen zu erstellen. Ich folge dies, um jetzt an einem Liniendiagramm zu arbeiten. Der Unterschied besteht darin, dass der Tooltip in meinem Diagramm ein Feld/Hintergrund enthält, das den im Tooltip angezeigten Wert enthält. Daher füge ich append('rect') mit attr('fill', 'white') hinzu.

mousePerLine.append('rect'). 
    attr('width', '38px'). 
    attr('height', '20px'). 
    attr('class', 'tooltipRect'). 
    style('fill', 'white'). 
    attr('transform', 'translate(5,-13)'); 

Um How to select multiple selectors with selectAll?

.select("text") 

    .attr("transform", function(d,i) { 
     return "translate (10,"+(3+ypos[i].off)+")"; 
    }) 

zu

.selectAll(".tooltipRect, text") 

    .attr("transform", function(d,i) { 
     return "translate (10,"+(3+ypos[i].off)+")"; 
    }) 

Here's a fiddle of the problem.

jedoch sowie rect, ich geändert Linie 292 nach einem Post hier Überlappung von Text zu vermeiden , sind die Tooltips immer noch überlappend. Kann jemand helfen herauszufinden, was die Ursache des Problems ist? Danke im Voraus!

Answer 1

Die Überschneidungen wahrscheinlich wegen der Art, wie Sie sie auswählen.
Warum nicht die selectiona auf den Text schließen (halten Sie die Textauswahl wie oben), aber eine neue Auswahl für das rect machen:

d3.selectAll(".mouse-per-line") 
    .select("rect") 
    .attr("transform", function(d,i) { 
     return "translate (5,"+(ypos[i].off - 13)+")"; 
    }); 

Dies funktioniert für mich. Ich habe die Übersetzung basierend auf Ihrer ursprünglichen Einrichtung der Rect. Ich habe den Offset in Zeile 286 von 15 auf 20 angepasst - es sieht etwas besser aus.