web-dev-qa-db-ja.com

D3でシンプルなタイムラインを描く

これは私が達成しようとしていることです:

Timeline

この例では、開始日(2011年6月1日)、終了日(2012年7月1日)、およびこの範囲内の複数のイベントがあります。

各イベントは、カレンダーの1日と関連付けられています(1日に多くのイベントを行うことは可能です)。

このデータはMySQL DBからフェッチされます。

どんな助けや提案も高く評価されます。

26
azeós

私は最近同様のことをしなければなりませんでした。結局、このケースを処理できるd3プラグインをいくつか書きました。 https://github.com/jiahuang/d3-timeline

enter image description here

enter image description here

enter image description here

enter image description here

私はD3もかなり新しいですが、役立つことを願っています。

42
zhyfer

time scale および axis でこれを達成できるはずです。

Scott Murray には、非常に優れた一連のチュートリアルがあります axes

タイムラインを、時間スケールを持つ1次元散布図と考えてください。

9
Superboggly

同様の視覚化を開発し、Github timeknots コンポーネントに基づいてd3.jsをベースに開発します。

0
user8171823