Javascript 时间线：在D3中有机会堆叠矩形？

我目前在一个图表上有一个事件的叠加。在这种情况下，事件具有持续时间，并用矩形表示：

很自然，每个矩形都会被数组中事件的索引删除：

annotations.enter()
    .append("svg:a")
    .append('rect')
    .attr("y", (d, i) => { return i * ((height * .05) + 2) })
    .attr("height", height * .05)
    .attr("x", (d: any) => { return xScale(moment(d.StartDate).utc().unix() * 1000); })
    .attr("width", (d: any) => {
         var startT = moment(d.StartDate).utc().unix() * 1000
         var endT = moment(d.EndDate).utc().unix() * 1000
         if (startT == endT) {
             return 3
         }
         return xScale(endT) - xScale(startT)
    })

我想做的是，如果矩形有空间，将事件向上移动到顶部。但是，如果没有空间，我仍然希望将它们向下堆叠

因此，上面的结果将类似于以下内容（我刚刚在chrome inspector中编辑了y VAL以生成此图像）：

---

有什么建议可以帮我吗？在

中可以找到这一恐怖事件的完整D3代码，最后执行以下操作：

按开始日期排序

跟踪每行的最后结束日期

如果当前开始日期大于行的结束日期，则插入，如果未转到下一行

代码：

$scope.annotations=..sortBy（data.annotations，（d:Annotation）=>{return d.StartDate；}）；
...
如果（scope.annotationEnabled&&scope.annotations.length！=0）{
var rowId={}；//注释Id->rowId
var rowEndDate={}；//rowId->EndDate
var maxRow=0；
对于（var i=0；i

如下所示：

$scope.annotations = _.sortBy(data.Annotations, (d: Annotation) => { return d.StartDate; });
...
if (scope.annotateEnabled && scope.annotations.length != 0) {
    var rowId = {}; // annotation Id -> rowId
    var rowEndDate = {}; // rowId -> EndDate
    var maxRow = 0;    
    for (var i = 0; i < scope.annotations.length; i++) {
        if (i == 0) {
            rowId[scope.annotations[i].Id] = 0;
            rowEndDate[0] = scope.annotations[0].EndDate;
            continue;
        }
        for (var row = 0; row <= maxRow+1; row++) {
            if (row == maxRow+1) {
                rowId[scope.annotations[i].Id] = row;
                rowEndDate[row] = scope.annotations[i].EndDate;
                maxRow+=1
                break;
            }
            if (rowEndDate[row] < scope.annotations[i].StartDate) {
                rowId[scope.annotations[i].Id] = row;
                rowEndDate[row] = scope.annotations[i].EndDate;
                break;
            }
        }   
    }
...
.attr("y", (d) => { return rowId[d.Id] * ((height * .05) + 2) })