Ich habe eine Reihe von Daten, die ich in einer Streuung zeichne. Wenn ich mit der Maus über einen der Kreise fahre, möchte ich, dass Daten angezeigt werden (z. B. x-, y-Werte, möglicherweise mehr). Folgendes habe ich versucht:
vis.selectAll("circle")
.data(datafiltered).enter().append("svg:circle")
.attr("cx", function(d) { return x(d.x);})
.attr("cy", function(d) {return y(d.y)})
.attr("fill", "red").attr("r", 15)
.on("mouseover", function() {
d3.select(this).enter().append("text")
.text(function(d) {return d.x;})
.attr("x", function(d) {return x(d.x);})
.attr("y", function (d) {return y(d.y);}); });
Ich vermute, ich muss informativer darüber sein, welche Daten eingegeben werden sollen.
Antworten:
Ich gehe davon aus, dass Sie einen Tooltip wünschen. Der einfachste Weg, dies zu tun, besteht darin
svg:title
, jedem Kreis ein Element anzuhängen , da der Browser dafür sorgt, dass der Tooltip angezeigt wird und Sie den Mauszeiger nicht benötigen. Der Code wäre so etwas wieWenn Sie schickere Tooltips wünschen, können Sie beispielsweise beschwipst verwenden. Siehe hier für ein Beispiel.
quelle
svg:g
Sie mit dem tatsächlichen Kreis überlagern, aber keine Breite und Höhe angeben. Derzeit wird der Begrenzungsrahmen verwendet und der Tooltip am Rand platziert. Das Herumspielen mit den Optionen von tipsy könnte ebenfalls hilfreich sein.Ein wirklich guter Weg, um einen Tooltip zu erstellen, wird hier beschrieben: Einfaches D3-Tooltip-Beispiel
Sie müssen ein div anhängen
Dann können Sie es einfach mit umschalten
d3.event.pageX
/d3.event.pageY
ist die aktuelle Mauskoordinate.Wenn Sie den Text ändern möchten, können Sie ihn verwenden
tooltip.text("my tooltip text");
Arbeitsbeispiel
quelle
Dafür gibt es eine großartige Bibliothek, die ich kürzlich entdeckt habe. Es ist einfach zu bedienen und das Ergebnis ist ganz ordentlich: d3-tip.
Sie können hier ein Beispiel sehen :
Grundsätzlich müssen Sie nur ( index.js ) herunterladen und das Skript einschließen:
und folgen Sie dann den Anweisungen von hier (gleicher Link wie Beispiel)
Aber für Ihren Code wäre es so etwas wie:
Definieren Sie die Methode:
erstelle deine svg (wie du es schon tust)
Rufen Sie die Methode auf:
Tipp zu deinem Objekt hinzufügen:
Vergessen Sie nicht, das CSS hinzuzufügen:
quelle
Sie können die Daten, die im Mouseover verwendet werden sollen, wie folgt übergeben: Das Mouseover-Ereignis verwendet eine Funktion mit Ihren zuvor bearbeiteten
enter
Daten als Argument (und den Index als zweites Argument), sodass Sie keinenter()
zweites Mal verwenden müssen.quelle
d3.select(this)
, um die Form zu ändern und wusste nicht, wie ich die Instanz in eine Eingabe / Aktualisierung bekommen sollte.Dieses kurze Beispiel zeigt, wie Sie in d3 benutzerdefinierte QuickInfos erstellen.
quelle
return tooltip.style("top", (d.x + 40) + "px") .style("left", (d.y + 80) + "px");
das'mousemove'
Attribut verwenden. Dasd.x
wird helfen, den Tooltip relativ zum Objekt zu bewegen, nicht zur gesamten Seite