Javascript eigener Diagram-Editor

  • Hallo zusammen,


    möglicherweise kennen viele von euch den frei zugänglichen online Editor http://www.draw.io . Dort kann man ganz einfach eigene Diagramme erstellen und diese Downloaden.

    Ich möchte selbst so ein Programm schreiben. Leider bin ich relativ neu in der Welt von Javascript und wollte mir daher ein paar gute Ratschläge holen.

    Wie fange ich damit am besten an ? Welche library wird frei angeboten und gibt es dazu evtl. auch ein Tutorial ?


    Ich bin für jeden Ratschlag sehr dankbar.


    LG

  • Da musst Du dich zunächst mal zwischen dem Grafikformat entscheiden: Vektor bzw. SVG oder Bitmap bzw. HTML5-Canvas. SVG hat den Vorteil, dass es beliebig skalierbar ist. Deshalb bin ich in letzter Zeit mehr in diese Richtung gegangen, während ich mit Canvas und der Bibliothek jCanvas angefangen habe. jCanvas hat eine sehr übersichtliche Doku wo man alles schnell findet und die leicht zu verstehen ist.


    Bei SVG habe ich bisher d3.js verwendet. Dieses scheint zwar sehr mächtig zu sein, ich hatte aber einige Probleme, Anleitungen zu den einfachen Funktionen, wie Linien, Kreise, Kreissegmente zu finden. Habe aber immer etwas gefunden und bin zum Ziel gekommen. Bin aber damit noch am Anfang und habe bei weitem noch nicht viele Möglichkeiten ausgeschöpft.

    Hier ein Beispiel mit d3.js:

    https://jsfiddle.net/Sempervivum/40kLdxr0/10/