D3多层时间线

Question

这有点复杂，但我尝试创建一个时间轴图，类似于此处显示的图：

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

打嗝带来了我的数据。我有3种不同的输入，可以从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

就这样被标记为已经回答了 - 所有的功劳都归功于@SteveR找到了npm模块npmjs.com/package/timelines-chart，这正是我所需要的。谢谢！