it-swarm.com.de

Zeichnen Sie mit D3 eine einfache Zeitleiste

Das versuche ich zu erreichen:

Timeline

In diesem Beispiel habe ich ein Startdatum (1. Juni 2011), ein Enddatum (1. Juli 2012) und mehrere Ereignisse zwischen diesem Bereich. 

Jedes Ereignis bezieht sich auf einen Tag im Kalender (obwohl an einem Tag viele Ereignisse möglich sind). 

Diese Daten werden aus einer MySQL-Datenbank abgerufen.

Jede Hilfe oder Anregung wird sehr geschätzt. 

20
azeós

Ich musste kürzlich etwas Ähnliches machen. Am Ende habe ich ein d3-Plugin geschrieben, das diesen Fall unter einigen anderen handhaben konnte. https://github.com/jiahuang/d3-timeline

enter image description here

enter image description here

enter image description here

enter image description here

Ich bin auch ziemlich neu in D3, aber ich hoffe es ist nützlich.

38
zhyfer

Sie sollten dies mit einer Zeitskala und einer Achse bewerkstelligen können.

Scott Murray hat wirklich gute Tutorials, die in einem für Äxte münden

Stellen Sie sich Ihre Zeitleiste als ein 1-dimensionales Streudiagramm mit Zeitskala vor.

9
Superboggly

Ich werde eine ähnliche Visualisierung entwickeln und auf Github timeknots components basierend auf d3.js finden.

0
user8171823