Wie zeichne ich die Linien eines Stammbaums mit HTML-CSS?

StackOverflow https://stackoverflow.com/questions/1695115

Frage

Ich versuche, etwas Ähnliches zu implementieren http://www.ancestry.com hat, aber ich bin mir nicht sicher, wie ich die Linien zeichnen soll.

Hier ist eine grobe ASCII-Skizze dessen, was ich tun möchte:

                 +----GrDAD1
                 |
     +----DAD----+
     |           +----GrMOM1
ME --+
     |           +----GrDAD2
     +----MOM----+
                 |
                 +----GrMOM2

Ich denke, eine Möglichkeit, dies zu tun, besteht darin, eine Zelltabelle zu erstellen und Bilder der Linien zu erstellen, um jedes der Kinder mit ihren Eltern zu verbinden.Ich vermute zwar, dass es einen einfacheren Weg gibt, aber meine CSS-Kenntnisse sind recht begrenzt.Hat jemand einen Vorschlag, wie ich das umsetzen kann?

War es hilfreich?

Lösung

Eine weitere Option für eine grafische Oberfläche wäre das Canvas-Element.Da findet man einige Infos dazu Hier, Hier, und einige Demos dessen, was es kann Hier.

Persönlich würde ich Canvas mit einer Imagemap-Überlagerung oder möglicherweise Flash wählen.Das Erstellen eines grafischen Layouts, das nur Divs oder Tabellen verwendet, könnte sehr schnell außer Kontrolle geraten und riesigen und hässlichen Code erzeugen.Obwohl das Ansichtssache ist.:) :)

Sie können Canvas zum Rendern der Linien verwenden und dann die Divs mit Text für jeden Knoten absolut positionieren.Oder Sie könnten das Ganze im Canvas rendern (an diesem Punkt benötigen Sie eine Bildkartenüberlagerung, wenn der gerenderte Baum interaktiv sein soll.)

Andere Tipps

Sie können es mit reinem CSS tun. Hier ein Beispiel:

http://thecodeplayer.com/walkthrough/css3-family-tree

Ich werde eine weitere Antwort auf, werfen, obwohl die Antworten vor allem im Baseballstadion sind.

Nehmen wir an, Sie auf allen Browsern arbeiten wollen. Wenn Sie im Internet Explorer arbeiten müssen, und Sie Ihre eigene Leinwand Lösung kodieren, können Sie einschließen möchten ExplorerCanvas .

Stammbäume sind im Wesentlichen Binärbäumen - ich weiß, das wirkliche Leben mit Adoptionen, Scheidungen heikel ist, pfui, aber lassen Sie uns für eine Sekunde nur davon ausgehen, dass sie in einer Richtung (Vorfahren) von einer bestimmten Person gehen binär sind <. / p>

Ein gutes Werkzeug, das Canvas verwendet, hat die Brücke auf IE enthalten zu arbeiten, und verwendet ein einfaches und allgemeines Datenformat das JavaScript InfoVis Toolkit ist.

Überprüfen Sie die Probe heraus an: http://thejit.org/static/v20/Jit/Examples/ Spacetree / example2.html

Es kann nicht genau, was Sie aus dem Kasten heraus wollen, aber Sie können das Aussehen zwicken und fühlen.

Die Datennutzlast Plug-in ist sehr einfach, und Ihr Beispiel würde wie folgt aussehen: 

var tree = {
  id: "ME",   // Needs to be internally unique 
  name: "ME", // Visual label, does not need to match id 
  data: {},   // not really used here, but parameter needed
  children: [
    {id: "DAD", 
    name: "DAD", 
    data: {},
    children: [
      {id: "GrDAD1", 
      name: "GrDAD1", 
      data: {},
      children: []},
      {id: "GrMOM1", 
      name: "GrMOM1", 
      data: {},
      children: []},          
    ]},
    {id: "MOM", 
    name: "MOM", 
    data: {},
    children: [
      {id: "GrDAD2", 
      name: "GrDAD2", 
      data: {},
      children: []},
      {id: "GrMOM2", 
      name: "GrMOM2", 
      data: {},
      children: []},          
    ]}
  ]
};

Ich bin sicher, es gibt auch andere Lösungen gibt, und ich hoffe, dass Sie einen finden, der für Sie arbeitet.

Ich mag SlickMap CSS für diese.

Da es für Sitemaps gemacht hat, es Arten Linklisten verschachtelt, aber es ist trivial, es zu ändern, um mehr zu handhaben als Links in jeder Zelle, wie ich hier tat: http://dl.dropbox.com/u/546793/demo/SlickmapCSS_rich/index.html

Eine Option ist die absolute Positionierung und ein paar Bilder zu verwenden. Sie werden eine horizontale Linie und eine vertikale Linie Bild benötigen. Dann Positionierung verwenden Sie die Elemente mit den entsprechenden Leitungen zu positionieren.

Die Beispiele, die ich bisher Blitz für Sachen wie das verwendet gesehen hat. http://academia.edu zum Beispiel.

Ansonsten würde ich wahrscheinlich absolut positionierte DIVs verwenden, um die Linien zu bilden - die einige komplizierte Berechnungen erfordern würde, aber:)

Eine dritte Option - wenn Sie bereit sind, mehr Javascript zu verwenden und opfern einige Browser-Kompatibilität ist das SVG-Element zu verwenden. Sie können diese Bibliothek Kasse: http://raphaeljs.com/ Es gibt eine schöne baumartige Demo in dort, dass Sie nützlich sein können ( http://raphaeljs.com/graffle. html ).

Ich denke, CANVAS verwendet wird.

Haben Sie einen Blick .. kann es eine Idee gibt Zeichnung Grafik mit Leinwand

Sie können mit jsPlumb, die für diese Art von Sachen ziemlich gut http: // jsplumbtoolkit. com / demo / Chart / mootools.html

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top