Layoutgeometrie für Baumstrukturen / attraktive Anordnung von Knoten
Ich habe eine baumartige Datenstruktur und möchte sie auf einem SVG-Canvas (mit jQuery SVG) zeichnen. Ich möchte die Knoten auf attraktive Weise von oben nach unten verteilen.
Idealerweise brauche ich eine Klasse oder Funktion, zu der ich eine Repräsentation des Baumes übergeben und die X- und Y-Koordinaten jedes Knotens zurückbekommen kann. Leider wurde mein Googling durch Tausende von Treffern für das List-Tree-GUI-Widget frustriert, was ich nicht möchte.
Idealerweise wäre das ein wenig Javascript, aber ich könnte auch Python verwenden (auf der Serverseite). Ich habe mir das Python-Zeug auf Github, aber ich kann wirklich nicht den Kopf oder den Schwanz seiner Verwendung machen (oder es zum Laufen bringen.) Ich habe auch einen kurzen Blick auf ete2a1 , aber es konnte nicht ordnungsgemäß installiert werden, die Dokumente sind nicht abgeschlossen und es scheint mehr darauf ausgerichtet zu sein, Bäume als Bilder darzustellen anstatt Geometrie zu machen.
Entschuldigung, wenn das eine vage Frage ist, lassen Sie es mich wissen, wenn ich es klarer machen kann. Im Grunde habe ich das:
%Vor%was würde rendern:
%Vor%(Uh, das stimmt vielleicht nicht ganz, aber Sie haben die Idee.)
Irgendwelche Tipps sehr geschätzt!
3 Antworten
Ich sehr empfehle d3.js. Dieses zusammenklappbare Dendrogramm eignet sich hervorragend für große Datasets. Es gibt auch ein regelmäßiges Dendrogramm . Sehr einfach zu Plug-and-Play, insbesondere mit jQuery Hintergrund.
Ich werde hier eine Antwort geben, basierend auf dem Python, den ich vor zwei Jahren gehackt habe, obwohl es bei weitem nicht gut ist. Wie Oli Charlesworth vorgeschlagen hat, habe ich Graphviz über PyDot verwendet. Das vollständige Skript wird unten veröffentlicht, aber zuerst musste ich das Setup durchführen, um es funktionieren zu lassen (vorausgesetzt, Sie verwenden virtualenv):
Stellen Sie zuerst sicher, dass graphviz installiert ist. Angenommen, Sie verwenden etwas mit apt:
%Vor%Erstellen Sie eine neue virtualenv mit virtualenv Wrapper:
%Vor%In der neuen virtualenv, pin die pyparsing-Version auf eine Pre-2.0-Version (erforderlich für den dot_parser zu arbeiten):
%Vor%Installieren Sie pydot:
%Vor%Jetzt habe ich das Python benutzt (Warnung: es ist nicht nett):
%Vor%Obwohl das ziemlich hässlich ist, diente es mehr oder weniger meinen Zwecken. Ich wäre an einer besseren Lösung interessiert, wenn jemand eine finden könnte.
Ich habe vor einiger Zeit daran gearbeitet und meine alte Implementierung in Javascript ausgegraben.
Dies setzt voraus, dass alle Knoten die gleiche Breite haben, aber sie verallgemeinert sich nett zu dem Fall, in dem jeder Knoten seine eigene benutzerdefinierte Breite enthält. Suchen Sie einfach nach node_size Referenzen und generalisieren Sie diese entsprechend.
Nachfolgend finden Sie eine vollständige HTML-Datei mit eingebettetem JavaScript. Aktualisieren des Browsers erstellt einen neuen zufälligen Baum und zeichnet ihn. Aber Sie können meine Zeichenroutinen ignorieren, die alte CSS-Tricks zum Rendern von Boxen und Linien verwenden. Die Koordinaten sind in den Baumknoten gespeichert.
Hier ist eine Beispielausgabe. Es zeigt die einzige wesentliche Schwäche. Es ist "links gierig". Wenn ein Teilbaum wie der bei 60 Wurzeln und Rutschen kann, wird er immer so weit wie möglich links liegen. Ein Spezialzweck-Hack löst dies für Blätter zwischen Nicht-Blättern desselben Elternteils, z. 73. Eine allgemeine Lösung ist kniffliger.
Tags und Links python javascript tree drawing