Question

我希望构建一个弯曲的时间线应用程序。

enter image description here

在这个例子中 - 我正在尝试建立一个时间图表，用带刻度的曲线表示。

我可能会将这些图表以同心方式并排放置

所以外弧表示电影的持续时间的开始/结束 - 时间以分开的刻度表示。
内部图表平行（时间图表旁边）代表电影中的章节。

_数据可以表示用户旅程 - 而不是其年龄的持续时间。而不是章节其会话数据，如登录/注销。内部的另一个环可以表示其他与时间相关的交互数据 - 就像约会信息一样。

我以某种方式对图表进行编码 - 可以在内部或外部表示刻度。

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

enter image description here

*最新代码* 持续时间表 - 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（缩进）。低谷是根据先前的开始时间，下一个结束时间计算的 - 因此间隙是桥接的。这可以很方便地显示用户的活跃程度 - 上次登录时间和持续时间。我想时间尺度数据需要代表分钟/秒而不是天。热衷于查看此类图表的任何增强功能。如何标记它以及标签应该放在哪里 - 它们如何被动画化。

d3.js Time arcs app

1 个答案: