D3多层时间线

Question

这有点复杂，但我正在尝试创建一个时间线图，类似于这里显示的那个：

http://bl.ocks.org/bunkat/2338034

我的数据带来了麻烦。我有三个不同的馈送，从7个不同的传感器获取数据。有些传感器可能与其他传感器同时发送响应，因此重叠会导致当前代码出现一些问题。

本质上，我想展示这样的东西：

​

我的数据如下所示：

[
  {
    "ID": "run0001",
    "data": [
        {"Time": 760 , "EndTime": 780,  "Feed": "Feed-1" , "FeedName": "SensorA", "lane":0},
        {"Time": 780 , "EndTime": 800 ,  "Feed": "Feed-1" , "FeedName": "SensorA", "lane":0},
        {"Time": 780 , "EndTime": 800 ,  "Feed": "Feed-1" , "FeedName": "SensorB", "lane":0},
        {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-1" , "FeedName": "SensorA", "lane":0},
        {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-1" , "FeedName": "SensorB", "lane":0},
        {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-1" , "FeedName": "SensorB", "lane":0},
        {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-1" , "FeedName": "SensorA", "lane":0},
        {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-1" , "FeedName": "SensorB", "lane":0},
        {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-1" , "FeedName": "SensorD", "lane":0},
        {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-1" , "FeedName": "SensorB", "lane":0},
        {"Time": 760 , "EndTime": 780 ,  "Feed": "Feed-2" , "FeedName": "SensorB", "lane":1},
        {"Time": 780 , "EndTime": 800 ,  "Feed": "Feed-2" , "FeedName": "SensorB", "lane":1},
        {"Time": 780 , "EndTime": 800 ,  "Feed": "Feed-2" , "FeedName": "SensorB", "lane":1},
        {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-2" , "FeedName": "SensorB", "lane":1},
        {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-2" , "FeedName": "SensorB", "lane":1},
        {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-2" , "FeedName": "SensorB", "lane":1},
        {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-2" , "FeedName": "SensorA", "lane":1},
        {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-2" , "FeedName": "SensorA", "lane":1},
        {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-2" , "FeedName": "SensorA", "lane":1},
        {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-2" , "FeedName": "SensorA", "lane":1},
        {"Time": 760 , "EndTime": 780 ,  "Feed": "Feed-3" , "FeedName": "SensorC", "lane":2},
        {"Time": 780 , "EndTime": 800 ,  "Feed": "Feed-3" , "FeedName": "SensorC", "lane":2},
        {"Time": 780 , "EndTime": 800 ,  "Feed": "Feed-3" , "FeedName": "SensorC", "lane":2},
        {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-3" , "FeedName": "SensorF", "lane":2},
        {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-3" , "FeedName": "SensorF", "lane":2},
        {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-3" , "FeedName": "SensorF", "lane":2},
        {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-3" , "FeedName": "SensorG", "lane":2}

    ]
  }
]

对我如何处理这件事有什么想法吗？

Answer 1

因此，这被标记为答案--找到npmjs.com/package/时间差的npmjs.com/软件包/时间表的npmjs.com模块的所有功劳都属于@SteveR --它正是我所需要的。谢谢!

github -时间表-图表