Zuvor habe ich React + Antdesign verwendet, um ein einfaches Timing -Diagramm zu implementieren, aber später hatte ich komplexere Anforderungen und verlangte gleichzeitig 2.000 Aufgaben, die Leistungsprobleme beinhalteten. Eine Demo, die im Grunde die folgenden Bedürfnisse erfüllt, der Rendering -Mechanismus von React hat jedoch zu großen Leistungsproblemen geführt. gesteckt. Nachdem ich darüber nachgedacht hatte, habe ich mich entschlossen, den originalen Soundtrack JS+CSS+HTML zu verwenden, um es zu implementieren, da die Leistung unter dem originalen Soundtrack JS die beste ist. Sprechen wir über die Anforderungen der neuen Version:
Die Aufgabe wird in einer Baumstruktur links angezeigt, faltbar
Die rechte Seite zeigt die Zeitdauer, die die Aufgabe zum Laufen benötigt
Müssen Zeilen verwenden, um die Beziehung zwischen Aufgaben zu verknüpfen
Sie können nach rechts zoomen, um einen detaillierten Aufgabenstatus anzuzeigen
Beim Zoomen bleiben die Grafiken in einem bestimmten Verhältnis zu beiden Enden mit der Maus als Mitte.
Bei der Skalierung des Diagramms bedeutet dies, dass die Zeit für die Aufgabe und die Koordinaten entsprechend dem Anteil der Bildvergrößerung entsprechend ändern müssen.
Wenn sich die Maus in das Timing -Diagramm bewegt, scheint eine Zeile die aktuelle Zeit und Informationen zu fordern.
Implementierungsschwierigkeiten
Mauszoom, X-Achse Zoom
Der Mauszoom erzeugt die Skalierung der x-Achse des Timing-Diagramms. Die Skalierung von Timing -Diagrammen bietet hier drei Ideen:
Fangen Sie die Daten vor und nach einem bestimmten Algorithmus ab und rendern
Verwenden Sie den Scalex von CSS3, um das DOM des Zeitdiagramms zu skalieren
Die tatsächliche Änderung der Breite des Timing -Diagramms, die Länge der ausgeführten Aufgabe, die Länge der Verbindungsleitungen und die erwartete Zeit, die für die ausgeführte Aufgabe erforderlich ist, werden in Prozent angezeigt.
Vor- und Nachteile von drei Ideen:
Vorteile: Es besteht keine Notwendigkeit, die CSS-Attribute des DOM zu betreiben, und es ist bequemer, sie zwischen ihnen erneut zu rendern. Nachteile: Für die Verwendung von DOM -Neue verbraucht es eine schwerwiegende Leistung und ist bei einer großen Anzahl von Aufgaben sehr langsam.
Vorteile: Ändern Sie einfach die CSS des DOM, laden Sie schnell und verarbeiten Sie mehr. Nachteile: Das Computer ist problematisch.
Vorteile: schnelles Laden und sehr reibungslos. Nachteile: Es wird bestimmte Fehler bei der Verwendung prozentualer Berechnungen geben, und Sie werden sie sehen, wenn Sie sich in gewissem Maße vergrößern. (Alle Materie wird berücksichtigt, ich benutze den dritten Typ)
// Funktion, die den Prozentsatz der Breite berechnet // Endzeit: Endzeit der Aufgabe // Startzeit: Startzeit der Aufgabe // Maxtime: Maximaler Wert aller Aufgaben // Mintime: Mindestwert aller Aufgaben Startzeit // Zeit: Alle aufsteigender Reihenfolge der Task -Startzeit und Endzeit // Task_width: Länge der Aufgabe, Länge der horizontalen Verbindungszeile, linker Wert der vertikalen Verbindungszeile const widthfun = Funktion (Endzeit, Startzeit, Maxtime, Mintime) {const task_width = (((((((((((((((((((((((((((() Nummer (Endtime) - Nummer (Starttime)) / ((Maxtime || Zeit [Zeit.Length - 1]) - (Mintime || Zeit [0])) * (Body_Width - Tree_box_dom.Offsetwidth)) / Dom.Offset Breite )* 100;Mauszoom, die Maus als Mitte halten, auf beiden Seiten zoomen
Lassen Sie uns zuerst das Inferenzprozessdiagramm einsetzen:
// Erläuterung der obigen Abbildung // Dom = DOM -Element des Zeitdiagramms // Doml1, Domel2 = Dom.scrollleft; // Domel1 repräsentiert die vorherige Dom.scrollleft; // Domel2 repräsentiert die aktuelle Dom.scrollleft; // Skala repräsentiert den Strom. Die Skala der Vergrößerung // scale1 darstellt die Vergrößerung der letzten Zeit // Tree_dom.Offsetwidth die Breite des Baums auf der linken = e.clientx - tree_dom.Offsetwidth // clientx2 repräsentiert den Abstand von der aktuellen Mausposition zum Zeitpunkt der Timing // Skalierung mit der Maus als Mitte, die Formel lautet: DOML2 = DOMEL1 (SAURE/SALE1) + Clientx1 (Skala/Skala/Skala/Skala/ scale1) - e.clientx + tree_dom.offsetwidth // Formel Erläuterung: // 1. Skala/Skala 1 repräsentiert das Skalierungsverhältnis dieser Zeit mit Ausnahme des Skalierungsverhältnisses des vorherigen Das linke Volumen skaliert auch während der zweiten Skalierung, sodass die Breite links mit der Skalierungsskala multipliziert werden muss Sollte sich auch mit der Skalierungsskala multiplizieren // Die tatsächliche Entfernung auf der linken Seite des Mausspositionsabstands vom Zeitpunkt am Ende entspricht der Skalierung der Länge des linken Scrolls // Seitencode time_box_parent.scrollleft = (time_box_parent. scrollleft + e.clientx - baum_box_dom.offsetwidth) * (scale_x / scale_x1) - e.clien tx + tree_box_dom.offsetwidth;
Verwenden Sie Verbindungen, um Beziehungen zwischen Aufgaben darzustellen
planen:
Bei Verwendung wird CSS3 + JS + HTML5 mit Pseudoelementen gezeichnet.
Wickeln Sie die rechtwinkligen Bilder mit DOM ein und setzen Sie ihre Position und Höhe.
Zeichnen mit Etiketten
Für und Wider:
Vorteile: Es werden keine zusätzlichen Tags hinzugefügt, was für das Rendern von Vorteil ist. Nachteile: Die übergeordnete Aufgabe generiert mehrere untergeordnete Aufgaben, und es ist schwierig, Pseudoklassen hinzuzufügen und die Höhe und Breite der Pseudoklassen festzulegen.
Vorteile: Bequem, berechnen Sie einfach die Höhe der untergeordneten Aufgabe aus der übergeordneten Aufgabe. Nachteile: Wenn es zu viele Aufgaben gibt, gibt es viele Bilder, die die Leistung stark beeinflussen.
Vorteile: Die Höhe und Position jedes Elements werden einzeln gesteuert, wobei eine hohe Kontrolle und Feedback -Farbe hinzugefügt werden können. Nachteile: Weitere Elemente haben hinzugefügt, die sich auf das Rendern auswirken (ich verwende den dritten Typ, was eine dumme Methode ist. Ein großer Mann mit einer besseren Methode kann Vorschläge liefern, danke).
Implementierungsideen:
Verwenden Sie eine Variable, um die Hierarchie -Tiefe jeder Aufgabe aufzuzeichnen. Verwenden Sie die akkumulierten Variablen, um die Höhe der vertikalen Linie und den oberen Wert der horizontalen Linie in einem bestimmten Verhältnis zu erhalten. (Verwenden Sie die oben prozentuale Funktion oben)
Zeiteinheit: Tag, Stunde, Minute, Sekunde
Dies ist eine relativ einfache Implementierungsidee:
Da die Zeit 4 -Skala dieser Demo eine Skala ist, bestimmen Sie, ob die Differenz zwischen dem Mindestzeitstempel und dem maximalen Zeitstempel durch 4 geteilt wird, ob es noch einen Tag (60 * 60 * 24, auf Sekunden konvertiert) und abfällt Bestellen Sie von groß nach klein die Zeiteinheit.