Javascript 阵列中的重叠矩形

我有一个矩形数组。我有另一个数组，这些矩形重叠。我花了几个小时试图找出如何在阵列中循环并找到重叠rec的新y位置，我脑子里有一个大错误

我只能在y轴上移动，因为x取决于日期刻度。我真的很感激一些代码示例。矩形的大小不相等

数据示例：

"people": [
{ "firstName":"John" , "startDate":"2012-01-01", "endDate":"2014-01-01", "basketValue":"10"}, 
{ "firstName":"Anna" ,  "startDate":"2011-01-01", "endDate":"2013-04-01", "basketValue":"20" }, 
{ "firstName":"Victor" ,  "startDate":"2011-01-01", "endDate":"2013-04-01", "basketValue":"13" },
{ "firstName":"Tom" ,  "startDate":"2011-01-01", "endDate":"2012-07-01", "basketValue":"20" },  
{ "firstName":"Santa" ,  "startDate":"2011-01-01", "endDate":"2012-12-24", "basketValue":"20" }, 
{ "firstName":"Peter" , "startDate":"2012-01-01", "endDate":"2012-02-21", "basketValue":"4" }
{ "firstName":"Carol" , "startDate":"2013-01-01", "endDate":"2013-07-05", "basketValue":"14" }
{ "firstName":"Sophie" , "startDate":"2012-09-01", "endDate":"2012-12-24", "basketValue":"8" }
]

while(loop){    
//overlappingRects array with those that overlaps
newY= overlappingRects[0].y+overlappingRects[0].barHeight + newY;
log(newY);
//this my logic error arrRec holds all of the recs
for(j=0;j<arrRec.length;j++){
    if(arrRec[j].Name!==overlappingRects[0].Name){
    log(overlappingRects[0].Name + ' ' + arrRec[j].Name);

        //How do I solve this that it not overlap with the other surounding rects
        overlap = rectOverlap(overlappingRects[0],arrRec[j]);
        if(overlap==false){
            //check for date...
                overlappingRects[0].y = arrRec[j].y;
                overlappingRects[0].endY = overlappingRects[0].barHeight + overlappingRects[0].y;
                arrRec[overlappingRects[0].key].y =overlappingRects[0].y;
                arrRec[overlappingRects[0].key].endY=overlappingRects[0].endY;
                overlappingRects.splice(0,1);
                break;
            }

        }

    }

}
if(overlappingRects.length==0 ){loop=false;}

“人”：[
{“firstName”：“John”，“startDate”：“2012-01-01”，“endDate”：“2014-01-01”，“basketValue”：“10”}，
{“firstName”：“Anna”，“startDate”：“2011-01-01”，“endDate”：“2013-04-01”，“basketValue”：“20”}，
{“firstName”：“Victor”，“startDate”：“2011-01-01”，“endDate”：“2013-04-01”，“basketValue”：“13”}，
{“firstName”：“Tom”，“startDate”：“2011-01-01”，“endDate”：“2012-07-01”，“basketValue”：“20”}，
{“firstName”：“Santa”，“startDate”：“2011-01-01”，“endDate”：“2012-12-24”，“basketValue”：“20”}，
{“firstName”：“Peter”，“startDate”：“2012-01-01”，“endDate”：“2012-02-21”，“basketValue”：“4”}
{“firstName”：“Carol”，“startDate”：“2013-01-01”，“endDate”：“2013-07-05”，“basketValue”：“14”}
{“firstName”：“Sophie”，“startDate”：“2012-09-01”，“endDate”：“2012-12-24”，“basketValue”：“8”}
]
while（loop）{
//重叠矩形数组与那些重叠的数组
newY=overlappingRects[0]。y+overlappingRects[0]。barHeight+newY；
日志（newY）；
//这是我的逻辑错误arrRec，它保存所有REC
对于（j=0；j
，假设矩形表示为：

{ "position": {"x": <x coord>, "y": <y coord>},
  "width": <pixel value>,
  "height": <pixel value>
}

这是第一次尝试，这个算法的问题是每行只有一个矩形。为了获得一个紧凑的视图，我们需要考虑矩形的x位置。
我们可以把事情复杂化一点：

var gap = {"x": 2, "y": 5};

bar.sort(function(a,b) {
    var y = (a.position.y - b.position.y);
    return y?y:a.position.x - b.position.x;
});

for (i=1; i<bar.length; i++) {
    for (j = i-1; j>=0; j--) {
        safe = {
            "y": bar[j].position.y + bar[j].height + gap.y,
            "x": bar[j].position.x + bar[j].width + gap.x
        };
        if (bar[i].position.y <= safe.y) { // the rects can overlap
            if (bar[i].position.x <= safe.x) { // the rects do overlap
                bar[i].position.y = safe.y;
            }
        }
    }
}

var-gap={“x”：2，“y”：5}；
条排序（函数（a，b）{
变量y=（a.position.y-b.position.y）；
返回y？y:a.position.x-b.position.x；
});
对于（i=1；i=0；j--）{
安全={
“y”：杆[j]。位置。y+杆[j]。高度+间隙。y，
“x”：条[j]。位置.x+条[j]。宽度+间隙.x
};
如果（bar[i].position.y如果您能提供一个矩形的示例，那就太好了。很显然，它们代表不同长度的时间跨度。它们在y方向的大小是否也不同？您是否只想显示彼此并排的各种事件？是的，它们也有不同的大小。我不需要在特定的时间段中使用它们在y轴上排序，但我需要进行一些优化，这样我就不能再添加一行了。我只是不知道算法。通过一个你必须操作的数组示例，我认为我们的帮助会更有成效。谢谢你，Eineki:-）。我会测试它。它几乎是甘特图，我从一个模板开始。正如你提到的，我有矩形的坐标，这对我帮助很大。我仍然有一个问题，因为我想优化绘图以找到第一个空白。
var gap = {"x": 2, "y": 5};

bar.sort(function(a,b) {
    var y = (a.position.y - b.position.y);
    return y?y:a.position.x - b.position.x;
});

for (i=1; i<bar.length; i++) {
    for (j = i-1; j>=0; j--) {
        safe = {
            "y": bar[j].position.y + bar[j].height + gap.y,
            "x": bar[j].position.x + bar[j].width + gap.x
        };
        if (bar[i].position.y <= safe.y) { // the rects can overlap
            if (bar[i].position.x <= safe.x) { // the rects do overlap
                bar[i].position.y = safe.y;
            }
        }
    }
}