javascript - D3 多层时间线

Question

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

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

打嗝来 self 的数据。我有 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，它正是我需要的。谢谢!

github - timelines-chart