Wie kann ich ein "System Thinking" -Diagramm wie dieses Beispiel animieren?

566
random65537

Ich mag diese auf Javascript basierende Version eines Systems, das ein Diagrammtool zum Nachdenken über Diagramme verwendet. Es nimmt Beziehungen und berechnet die dahinter liegenden Werte. Anschließend wird ein Punkt entlang des Pfads animiert.

Also, bevor ich weiter bekommen, werden poste ich einen anderen Link, ein System zu verstehen, hier

Frage

  • Wie kann ich Visio diese "lebenden Diagramme" erstellen lassen und wie kann ich den Prozess vereinfachen?

Beispiele:

enter image description here

enter image description here

1
Warum gehen Sie davon aus, dass Visio das richtige Werkzeug dafür ist? simlev vor 6 Jahren 2

2 Antworten auf die Frage

0
Surrogate

Probieren Sie dieses Add-In- HTML-Export von Nikolay aus

0
Jon Fournier

Um dies in Visio zu tun, müssen Sie Ihre eigene Softwareautomation schreiben.

Im Wesentlichen müssten Sie:

  1. Schreiben Sie Code, um die Karte in den Speicher zu "parsen". Dabei werden im Wesentlichen die Knoten und die Konnektoren zwischen ihnen aufgenommen
  2. Schreiben Sie Code, um die Konnektoren in einzelne Punkte zu "pixelieren" (Sie rufen einfach die .points () -Methode für die Konnektorform auf und geben ein Array von xy-Koordinaten zurück). Sie müssen dann die Punkte auf die richtige Anzahl für die Anzahl der Animationsaktualisierungen herunterladen, die Sie für das Durchlaufen dieses Connectors benötigen.
  3. Schreiben Sie eine Animationsroutine, die ein oder mehrere Sprites entlang der Konnektoren vorrückt, einschließlich der für das von Ihnen modellierten System relevanten Logik.

Das Exportieren in SVG und das Animieren mit Javascript ist möglicherweise eine geeignetere Alternative, aber ich gehe davon aus, dass die Programmierung ähnlich sein würde. Es ist einfacher, Animationssteuerelemente auf einer Webseite einzufügen als auf der Visio-Seite.

Verwandte Probleme