d3.js時間弧應用

Question

我正在尋找一個彎曲的時間軸應用程序。

在此示例中，我試圖構建一個時間表，該時間表由帶有刻度線的曲線表示。

我可能會將這些圖表同心地並排放置

• 因此，外部弧線代表影片的播放時間的開始/結束-時間以刻度為單位。
• 內部圖表與影片中的各個章節平行（在時間表旁邊）。

_數據可以表示用戶的旅程-而不是持續時間。 它的會話數據（例如登錄/關閉）代替了章節。 內部的另一枚戒指可能代表其他與時間有關的互動數據-例如約會信息。

我以某種方式對圖表進行了編碼-刻度可以在內部或外部表示。

http://jsfiddle.net/NYEaX/235/

目前，我的數據被硬編碼如下-將數據轉錄為時間戳的建議方式是-應該橋接該數據以創建已經輸入的數據類型嗎？

            "data": [
                {
                    "segments": [
                        {
                            value: 5,
                            color: "#2c2c2e"
                        },
                        {
                            value: 100,
                            color: "#2c2c2e"                            
                        },
                        {
                            value: 5,
                            color: "#2c2c2e"                            
                        },
                        {
                            value: 100,
                            color: "#2c2c2e"
                        },
                        {
                            value: 5,
                            color: "#2c2c2e"
                        },
                        {
                            value: 100,
                            color: "#2c2c2e"                            
                        },
                        {
                            value: 5,
                            color: "#2c2c2e"                            
                        },
                        {
                            value: 100,
                            color: "#2c2c2e"
                        },
                        {
                            value: 5,
                            color: "#2c2c2e"                            
                        }
                    ]
                }
            ]

Answer 1

*最新代碼*持續時間圖-jsfiddle.net/NYEaX/393
章節圖表-jsfiddle.net/NYEaX/394

---

我現在在此基礎上進行處理以處理日期並彌合數據缺口-http://jsfiddle.net/NYEaX/363/

因此，可以說這用於顯示會話數據或一個人的事件日歷。

{
   startTime: "1/3/2014 11:00:00",
   endTime: "2/3/2014 11:00:00"
},
{
   startTime: "6/3/2014 11:00:00",
   endTime: "7/3/2014 11:00:00"
},
{
   startTime: "8/3/2014 11:00:00",
   endTime: "9/3/2014 11:00:00"
}

因此，這三個記錄-表示blip（縮進）。 槽是根據上一個開始時間，下一個結束時間計算的，因此可以縮小差距。 這可以方便地顯示用戶的活躍程度-上次登錄時間和登錄時間。 我想時間標度數據需要代表分鍾/秒，而不是天。 熱衷於查看對此類圖表的任何增強。 如何標記標簽以及標簽應放置的位置-如何動畫化。