Ist es möglich, überschichtete SVG -Elemente zu haben, die in D3 miteinander interagieren?

Question

Ich habe ein Balkendiagramm, das im Grunde genommen ein Navigationselement ist, daher brauche ich ein einfaches vorhersehbares Rollover -Verhalten über den Balken. Im Wesentlichen muss ich sicherstellen, dass die kleinen Balken genauso einfach wie die großen Klicken sind, also habe ich die gesamte Spalte zu einem klickbaren Überschlag gemacht.

Hier ist ein Beispiel für das Verhalten, auf das ich mich beziehe:

Screenshot http://img6.imageshack.us/img6/6674/screengraph.png

Ich hatte versucht, dies mit D3 und SVG zu tun, stellte jedoch fest, dass es schwierig war, die Z-Indexes zwischen SVG-Elementen und Divs (oder SVG-Elementen und anderen SVG-Elementen Punkt). Ich erinnere mich jedoch, dass ich zu dem Schluss gekommen bin, dass der einzig effektive Weg, um das zu machen, wonach ich gesucht habe Zeigen Sie den Überrollwechsel, wenn einer von ihnen umdreht.

Ich habe SVG schließlich einfach geworfen und alle Divs verwendet, die nur D3 für die Maßstabsmethoden verwendet und alles mit Knockout.js -Vorlagen gezeichnet haben. Aber jetzt schaue ich mir 200 Zeilen von neuem JavaScript an und frage mich, ob D3 mir vielleicht eine sauberere Lösung gegeben hätte. Fehlte mir etwas in D3, das das hätte erreichen können, wonach ich leicht suche?

Answer 1

Gut, dass Sie die Spalten leicht verleitbar sind! Die Technik, die ich dafür verwenden würde, ist eine unsichtbare Überlagerung mit Zeiger-Events: ALL und optional dem Mausover-Hörer einem übergeordneten SVG: G-Element und nicht einem der Rektionen zugewiesen.

Die Struktur für jeden Balken würde so aussehen:

<g class="bar" transform="translate(0,…)">
  <rect class="green"></rect>
  <rect class="overlay"></rect>
</g>

(Sie haben wahrscheinlich andere Dinge, die Sie möglicherweise hinzufügen möchten, wie das hervorgehobene "14" in Ihrem Screenshot, das Sie als ein weiteres Rechtek mit abgerundeten Ecken und einem Textelement implementieren.)

Das Overlay-Rekt ist die Vollhöhe des Diagramms (70px in Ihrem Beispiel). Es hat den folgenden Stil:

.overlay {
  fill: none;
  pointer-events: all;
}

Das grüne Rekt ist nur die Höhe des Balkens und vertikal versenkt, sodass der Boden der Stange bei y = 0 liegt. Gleiches Angebot für die roten negativen Rechte.

Kurz gesagt, das unsichtbare Rekt mit Zeiger-Events erhält alle alle Zeiger-Events für diesen Balken. Sie können also verwenden: Schwebstile auf den Eltern -G -Elementen, sagen Sie die Barfarbe bei Schwebungen:

.bar:hover .green {
  fill: lightgreen;
}

Ebenso können Sie "Mouseover" und "Mouseout" -Ereignisse auf dem übergeordneten Gelement oder dem Overlay -Rekt registrieren.