Wolfgang Wiese: Baumdarstellung

Hallo,

kennt jemand eine Moeglichkeit mit Hilfe von JavaScript
eine Baumdarstellung zu machen?
Also damit mein ich NICHT die uebliche Explorer-Darstellungs, sondern wirklich einen
dynamisch generierten Baum, derart:

Ast1
      /    \    Ast2     Ast3
  /    \        \ Blatt1 Blatt2   Blatt3

Ich koennte dies zwar mit Hilfe einer Tabelle
abbilden (In 3 Jahrhunderten, wird es dann auch
irgendwann mal angezeigt), aber dann wuerden die
Verbindungslinien nicht vorhanden sein. :(

Fuer Hinweise waere ich sehr dankbar!

Ciao,
  Wolfgang

  1. Hi Wolfgang,

    ich würde die Inhatle der Knoten/Blätter in absolut positionierten <div>'s darstellen. Du hast dadurch absolute Freiheit, was vor allem die Darstellung entarteter Bäume angeht und es wird schneller als mit Tabellen gehen. Du musst dann allerdings alle Positionen berechnen, aber das ist ja nicht das Problem.

    Was die Linien angeht, ist mir gerade eine tolle Idee gekommen:

    Erstell 4 transparente Bilder, in dehnen jeweils nur eine diagonale Linie enthalten ist. Einmal von oben links, nach unten rechts usw. Mach die Bilder so groß, wie die längst Verbindungslinie, die du brauchst. Leg dann solch ein Bild in ein absolut positioniertes <div> und scaliere die Höhe und Breite entsprechend dem Winkel, in dem du zwei Knoten des Baumes verbinden willst. Positioniere das <div> dann genau zwischen die beiden Knoten und siehe da du wirst eine Verbundungslinie haben. Dadurch, dass das Bild tranzparent ist und dass du mit z-index arbeiten kannst, ist es möglich beliebige Linien guer über die Seite zu ziehen.

    Irgendwie gefällt mir das... :-)
    Hoffentlich hab ich keinen Denkfehler gemacht.

    Ach, wenn du die Vektorengine dann fertig hast, kannst du ja Flash platt machen. *g*

    Viel Spass beim bastel...

    ALEX

    1. Hi,

      ich würde die Inhatle der Knoten/Blätter in absolut positionierten <div>'s darstellen. Du hast dadurch absolute Freiheit, was vor allem die Darstellung entarteter Bäume angeht und es wird schneller als mit Tabellen gehen. Du musst dann allerdings alle Positionen berechnen, aber das ist ja nicht das Problem.

      Was die Linien angeht, ist mir gerade eine tolle Idee gekommen:

      Erstell 4 transparente Bilder, in dehnen jeweils nur eine diagonale Linie enthalten ist. Einmal von oben links, nach unten rechts usw. Mach die Bilder so groß, wie die längst Verbindungslinie, die du brauchst. Leg dann solch ein Bild in ein absolut positioniertes <div> und scaliere die Höhe und Breite entsprechend dem Winkel, in dem du zwei Knoten des Baumes verbinden willst. Positioniere das <div> dann genau zwischen die beiden Knoten und siehe da du wirst eine Verbundungslinie haben. Dadurch, dass das Bild tranzparent ist und dass du mit z-index arbeiten kannst, ist es möglich beliebige Linien guer über die Seite zu ziehen.

      Irgendwie gefällt mir das... :-)
      Hoffentlich hab ich keinen Denkfehler gemacht.

      Ach, wenn du die Vektorengine dann fertig hast, kannst du ja Flash platt machen. *g*

      Geile Idee!
      ich warte noch ein bischen (programmiere noch an anderen Zeug)
      ob noch eine JS/Java-Loesung kommt, ansonsten mach ich
      es wohl so.

      Den Code geb ich dann natuerlich raus.

      Ciao,
        Wolfgang