Mindmap mit CSS/HTML/Javascripterstellen?
Hey,
Ich suche einen möglichst
einfachen Weg, eine Mindmap, wie auf dem eingefügten Foto, mit Hilfe von HTML und CSS oder auch Javascript zu bauen. Ich bin im Internet zum Thema nicht ziemlich fündig geworden und bin etwas ahnungslos wie ich das ganze angehen könnte. Daher wäre es hilfreich, wenn ihr mir sagt, mit welchen Elementen ich arbeiten und wie ich richtig an die Sache rangehen sollte. Ich hatte erst gedacht, von der Div-Box einfach diese "----" Striche mit white-space:nowrap; zu schreiben und dann mit transform:rotate(70deg) zu drehen und anschließend mit overflow-x:hidden; eine Seite zu verstecken, sodass nur noch eine Sichtbar ist, an die ich dann vorhatte, irgendwie eine Div-box für die Fakten anzuhängen. Allerdings klingt das etwas irrsinnig, hättet ihr daher Ideen?
So sollte das ganze nachher aussehen :)
2 Antworten
An sich würdest du vom Modell her doch lediglich einen typischen Graph beschreiben müssen, der also aus Kanten und Knoten besteht.
Nun wäre bei den Kanten und Knoten erst einmal die Frage, inwiefern diese sich nun verhalten sollen. Sind sie beweglich?
Entweder du stellst die Kanten durch ein HR-Element dar (oder ein Element der Höhe 0 mit entsprechendem Rand) und rotierst dieses mit CSS oder du zeichnest gleich von Beginn an auf einem Canvas-Element.
Ich empfehle dir, dazu eine Library wie D3.js zu nehmen: https://d3js.org/