Pan / Zoom Ordinalskala?
Ich verwende d3, um ein vereinfachtes Gantt-Diagramm zu rendern, mit Schwenken und Zoomen mit d3.behavior.zoom.
Die x-Skala ist eine Zeitskala (leicht modifiziert, um Kalendertage in Spalten zu zentrieren, usw.) und funktioniert wunderbar, aber ich habe Probleme zu entscheiden, wie man die y-Skala zoomt / schwenkt, deren Domäne eine Liste von Aufgaben ist ist oft zu viel, um in den Chartbereich zu passen, also muss man panning / zoomen.
Gibt es eine Möglichkeit, der Standard-Ordinalskala mitzuteilen, dass sie auf Zoom- / Schwenkereignisse reagiert, oder sollte ich eine benutzerdefinierte Skalierung schreiben? Und wenn ich eine benutzerdefinierte Skala schreiben müsste, wäre es besser, sie auf d3.scale.ordinal (die gesamte Liste der Aufgaben zu speichern und nur die sichtbare Teilmenge als ihre Domäne zu verwenden) oder auf d3.scale zu basieren. linear (und dann etwas Ähnliches wie die Ordinalskala für Entfernungsbänder usw. implementieren?).
Oder gibt es etwas, das mir fehlt (ganz wahrscheinlich, da es mein erstes Projekt ist, das d3 verwendet)?
2 Antworten
Etwas von meiner vorherigen Antwort erweitert, da ich privat kontaktiert wurde, um zu erklären, wie ich das gemacht habe.
Zuerst ein Screenshot der betreffenden App, in dem der Job aggregiert und Planungsdaten anzeigt, die aus verschiedenen Quellen (PowerPoint-Dateien, Unternehmensdatenbanken usw.) stammen.
Das relevante Bit ist die rechte vertikale Achse mit den farbigen Punkten, wobei jeder Punkt den Aufwand und die involvierte Organisation eines Projekts darstellt. Der graue Bereich auf der Achse ist ein d3.js-Pinsel und kann verschoben / skaliert werden, um die Diagramm- / Tabellendaten in Echtzeit zu ändern.
%Vor%Was innerhalb des Handlers passiert, ist ziemlich einfach:
- Erhalte den Pinselumfang
- transponiere es zu den Indizes in meinem Datenarray
- Schneiden Sie mein Datenarray ab und legen Sie das Ergebnis als anzuzeigende Daten fest
- Aktualisieren Sie das Diagramm und die Tabelle
Ich hoffe, das macht es klar.
Es ist nicht so schwer, ich musste:
- Schreiben Sie eine benutzerdefinierte Skalierung, die größtenteils identisch mit d3.scale.ordinal ist, außer dass sie den gesamten Bereich der Domänenwerte speichert und eine Schnittmethode ([min, max]) implementiert, die den Bereich der sichtbaren Domänenwerte
- Verfolgen Sie das y-Übersetzungsdelta im Zoom-Ereignis-Callback und fügen Sie es zu einer Variablen hinzu, die die gesamte y-Übersetzung speichert
- überprüfe, ob der Gesamtumsetzungsbetrag & gt; = als das y-Delta zwischen zwei Bereichswerten ist, wenn geprüft wird, dass wir uns nicht bereits auf einer der (sichtbaren oder nicht sichtbaren) Domänengrenzen (0 oder Länge) befinden, und wenn wir die Scheibenindizes nicht um 1 erhöhen oder verringern, setzen wir die gesamte Übersetzungsvariable zurück und zeichnen dann die Achse neu