nicht angemeldet
innerHTML-Äquivalent in SVG bzw. XML
Hi,
in HTML kann ich ja ohne Probleme folgendes schreiben:
document.getElementByID('someID').innerHTML = newContent;
Ja, man kann drüber streiten ob das sauber is oder nicht, aber der Geschwindigkeitsvorteil ist nicht zu verachten.
Und genau diesen will ich auch für XML erreichen.
Ich habe einen vollständigen Graphen mit 10 Knoten und kanpp 200 Kanten, die ich dynamisch via document.createElement('circle' / 'polyline') erstelle.
Das dauert dann über eine Sekunde, und 200 elementige Graphen sind ja jez nicht so riessig.
XMLElement.innerHTML geht natürlich nicht, aber kann man das anders machen, in dem ich auch nur einen String an das XML-Element anhänge, anstatt alle Elemente dynamisch zu erzeugen?
Danke sehr
-
Hallo Dr.Colossos,
Ich habe einen vollständigen Graphen mit 10 Knoten und kanpp 200 Kanten, die ich dynamisch via document.createElement('circle' / 'polyline') erstelle.
Das dauert dann über eine Sekunde, und 200 elementige Graphen sind ja jez nicht so riessig.
Vermutlich werden die Elementknoten direkt erzeugt und an die vorhandene SVG-Struktur gebunden. Erzeuge alternativ ein g-Element und hänge zunächst alle Knoten daran. Dieses g-Element kann wiederum an einer passenden Stelle im SVG-Dokument eingehängt werden.
Grüße,
Thomas-
Erzeuge alternativ ein g-Element und hänge zunächst alle Knoten daran. Dieses g-Element kann wiederum an einer passenden Stelle im SVG-Dokument eingehängt werden.
Das Konzept ist übrigens bei allen DOMs möglich. Alternativ zum Containerelement kann man ein Document-Fragment erzeugen und wie du sagst alle neuen Elemente erst daran hängen, dann das Document-Fragment ins Element einhängen. Das Document-Fragment ist also ein spezieller Knoten, der nichts anderes tut als ein Container zu sein.
var frag = document.createDocumentFragment();
// Elemente gewohnt erzeugen und an frag anhängen
// frag ins Dokument einhängenDas ist üblicherweise auch performanter, als die Elemente einzeln einzuhängen.
Mathias
-
Hi,
und danke euch beiden.
Ich hab's mal schnell getestet, der Erfolg war leider minimal, evtl. ein paar Millisekunden schneller, aber weit entfernt von einer erhofften 1000%-Verbesserung.
Sicher ist DOM-Manipulation zu wenig effizient Graphen der Größe um 1000 Knoten zu erstellen ...
Aber trotzdem was dazu gelernt, danke!
-
Sicher ist DOM-Manipulation zu wenig effizient Graphen der Größe um 1000 Knoten zu erstellen ...
Hast du mal an Alternativen wie Canvas gedacht oder scheidet das aus anderen Gründen aus?
Mathias
-
Hi,
ja, ich habe auch eine HTML-Variante die mit Canvas arbeitet, hab aber an der lange nicht weiterentwickelt.
Problem mit den Canvas ist, dass ich einzelne Knoten/Kanten nicht direkt referenzieren kann, um diese z.B. zu verschieben, es sei denn jede Kante kommt in ein eigenes Canvas ... dann bin ich wieder genauso weit.
Ist alles in allem nur eine Spielerei, aber jegliche Denkanstöße sind natürlich immer erwünscht.
Danke!
-
Hallo Dr.Colossos,
Ist alles in allem nur eine Spielerei, aber jegliche Denkanstöße sind natürlich immer erwünscht.
Wäre Silverlight eine Option für diese Spielerei?
Grüße,
Thomas-
Hi,
klar, theoretisch schon, praktisch nicht. Da es bei einer Spielerei bleibt, wirds SVG/HTML + DOM bleiben, mit dem Erkenntnisgewinn, dass es sicher nicht performant genug ist ... is auch was wert.
Danke
-
Hallo Dr.Colossos,
klar, theoretisch schon, praktisch nicht. Da es bei einer Spielerei bleibt, wirds SVG/HTML + DOM bleiben, mit dem Erkenntnisgewinn, dass es sicher nicht performant genug ist ... is auch was wert.
Vielleicht kannst Du mal Deinen SVG-Ansatz posten. Ich würde das gern mal nach Silverlight portieren, um die Performanceunterschiede zu sehen. Allein durch die Kompilierung von SL2 sollte da etwas drin sein.
Grüße,
Thomas-
Puuhh, da hängt einiges dran.
Die Knoten sind "dragable", auch wurde für's Zeichnen des Graphen ein Spring-Embedder implementiert, und die Graph-Datenstruktur kommt aus einem PHP Backend, d.h. das eine stand-alone Lösung ohne Abhängigkeiten und entferntem Unnötigen würde schon ein paar Stunden dauern.
Den ganzen Code will ich nicht hier platzieren, auch ist vieles unsauber/prototypisch codiert.
Falls du immer noch Interesse hast, kannst mich anmailen, meine Adresse entspricht meinem Nickname hier, plus "@web[dot]de"
-
Hallo Dr.Colossos,
Den ganzen Code will ich nicht hier platzieren, auch ist vieles unsauber/prototypisch codiert.
Ok, dann halt nicht. Allerdings habe ich mal ein SL2-Beispiel zum dynamischen Erzeugen von 1000 Kreisen gebaut, welches eine ordentliche Performance aufweist. Nach dem (ersten) Laden des Plugins erscheinen die Kreise praktisch in Echtzeit.
Das Äquivalent zu innerHTML im Sinne der Ausgangsfrage zu SVG wäre hier übrigens die Methode CreateFromXAML(string).
Grüße,
Thomas-
Hi,
wie erwähnt will ich hier nicht ALLES online stellen, zum einen weil's viel Zeit gekostet hat, zum anderen weil's nicht 100% sauber ist.
Aber ich habe mein Mailadresse nicht umsonst hinterlassen.
Wenn du den Code noch willst, schreib mir eine Mail. Wird aber schon eine Woche dauern, da ich das nur mache wenn ich mal eine Verschnaufpause habe/mache.
Danke für dein Beispiel, schaus mir mal an
-
-
-
-
-
-
-
-
-
-