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"
}

因此，这三种记录低谷是根据以前的开始时间，下一个结束时间来计算的，所以缺口被弥合了。这可以方便地显示一个用户的活动程度--他们上次登录的时间和时间。我认为时间尺度数据需要表示分钟/秒，而不是天数。热衷于查看对这种图表的任何增强。如何给它贴上标签，标签应该放在哪里--它们是如何被动画化的。