d3を使用してスイムレーンチャートを作成

Question

次のようなスイムレーンチャートを生成する必要がありますが、Y軸に日付が表示されます。私が必要とするすべてのノードは、依存関係を持つアクティビティであり、フロー制御要素はありません。

D3のようなものを使用して、このことは可能ですかチャートのこのタイプのために使用することをお勧めJavaScriptライブラリはありますか？私はそれのような例を見ていないので、d3を使用することが可能な場合、私はどこから始めるのか分かりません。どんなヒントも大歓迎です。

Answer 1

前回の回答とコメントに基づいて、Raphael.jsを使用してグラフを実装する方法を開始しました。 600本以上のコード（主に裸の骨を補うフレームワーク）を書いた後、私はRaphael.jsがレンダリングテキストで非常に遅いことを発見しました。正確な理由は不明ですが、明らかに既知の問題です。最終的には、テキストのレンダリングに費やされた時間の80％で300アイテムのグラフをレンダリングするのに3.5秒かかりました。

その後、私はd3.jsで始まりました。私は、従来のブラウザのサポートが問題ではない場合、データバインドされたチャートを作成するときには、d3.jsがはるかに良い選択であることを発見しました。 d3.jsにスイムレーンチャートを作成すると、約100行のコードと600+以上のRaphael.jsが表示されました。また、d3.jsバージョンは、機能性が高く、見た目が良く、応答性も高いです。

宣言的なスタイルd3.jsには多少慣れていますが、データを簡単に扱うことができます。追加のボーナスとして、私のグラフは約250ミリ秒でレンダリングされます:)

私が作成した最終的なスイムレーンチャートはhttp://bl.ocks.org/1962173を参照してください。

Answer 2

私の意見では、raphael.jsが適しています。 IE6-8を含むすべてのブラウザをサポートし、d3はSVG対応ブラウザでのみ動作します。