我已经包含了一个代码片段,希望它可以很好地总结一切,并以一种“填空”的状态表示。
如果通过在更大的环境中查看问题有助于理解问题的根源,我最终要做的是在手机上的日历上显示每日查看时间表,可能类似于手机上的日历的工作方式。当事件开始在时间上重叠时,由此处的垂直 y 轴表示,我希望能够优化这些事件的宽度和位置,而不是重叠它们,也不会隐藏超过我对内容的需要 - 但是当有太多许多能够指示事物的东西都是隐藏的。
尽管示例在 javascript 中,但我并没有在寻找任何基于 CSS/HTML 的解决方案 - DOM 结构或多或少是一成不变的,只是寻找一种可能做我正在寻找的算法,如果它是在 C++ 中, TurboPascal、Assembly、Java,什么都不重要。在我的示例预期结果中,场景越复杂,结果更像是粗略的估计,在演示中也出现了我的预期结果——我什至没有一个很好的方法来做我的头脑中的数学一旦事情开始变得奇怪。
目标是填写函数optimizeLeftAndRightXStartPointsForNormalizedRectangleAreaWithoutOverlapping = (rectangles,minimumArea,minimumWidth,xMin,xMax)=>{}
// Let's say I have an array like this of rectangles where they have set y coordinates
// Some constraints on how this array comes out: it will besorted by the yTop property as shown below, but with no secondary sort criteria.
// The rectangles difference between yBottom and yTop is always at least 15, in other words this array won't contain any rectangles less than 15 in height
const rectanglesYcoordinatesOnlyExample1 = [
{"rectangle_id":"b22d","yTop":0,"yBottom":60},
{"rectangle_id":"8938","yTop":60,"yBottom":120},
{"rectangle_id":"e78a","yTop":60,"yBottom":120},
{"rectangle_id":"81ed","yTop":207,"yBottom":222},
{"rectangle_id":"b446","yTop":207,"yBottom":222},
{"rectangle_id":"ebd3","yTop":207,"yBottom":222},
{"rectangle_id":"2caf","yTop":208,"yBottom":223},
{"rectangle_id":"e623","yTop":227,"yBottom":242},
{"rectangle_id":"e6a3","yTop":270,"yBottom":320},
{"rectangle_id":"e613","yTop":272,"yBottom":460},
{"rectangle_id":"c2d1","yTop":272,"yBottom":290},
{"rectangle_id":"e64d","yTop":274,"yBottom":300},
{"rectangle_id":"b653","yTop":276,"yBottom":310},
{"rectangle_id":"e323","yTop":276,"yBottom":310},
{"rectangle_id":"fca3","yTop":300,"yBottom":315}
]
// I want to get a result sort of like this, explanations provided, although I'm not sure if my internal calculations in my head are 100% on the further I go.
// And I want to a run a function like so:
// optimizeLeftAndRightXStartPointsForNormalizedRectangleAreaWithoutOverlapping(rectanglesYcoordinatesOnlyExample1,(33.3 * 15),10,0,100);
// I will make this call later but I need to hoist my expected results here to enable the mocking to work for now at the point of the function definiton for my example. (see below)
// like so I'd get a result something like this, but I start becoming less certain of what the correct result should be the more I go into fringe stuff.
const expectedResultMoreOrLessForExample1 = [
{"rectangle_id":"b22d","leftX":0,"rightX":100,"yTop":0,"yBottom":60},
{"rectangle_id":"8938","leftX":0,"rightX":50,"yTop":60,"yBottom":120},
{"rectangle_id":"e78a","leftX":50,"rightX":100,"yTop":60,"yBottom":120},
{"rectangle_id":"81ed","leftX":0,"rightX":33.3,"yTop":207,"yBottom":222}, // Three rectangles side by side with minimum Area ["81ed","b446","ebd3"] from this point
{"rectangle_id":"b446","leftX":33.3,"rightX":66.6,"yTop":207,"yBottom":222},
{"rectangle_id":"ebd3","isMax":true,"leftX":66.7,"rightX":100,"yTop":207,"yBottom":222}, // has isMax property because there would be an overlap if it tried the next result, and it can't take area away from the other rectangles
// This rectangle gets thrown out because it would be there are 3 other rectangles in that area each with the minimum area (33.3 * 15);
// {"rectangle_id":"2caf","yTop":208,"yBottom":223}, This one gets thrown out from the result the time being because there are too many rectangles in one area of vertical space.
{"rectangle_id":"e623","yTop":227,"yBottom":242,"leftX":0,"rightX":100},
{"rectangle_id":"e6a3","leftX":0,"rightX":25,"yTop":270,"yBottom":320},
{"rectangle_id":"e613","leftX":25,"rightX":35,"yTop":272,"yBottom":460},
{"rectangle_id":"c2d1","leftX":71.28,"rightX":100,"yTop":272,"yBottom":290}, // fill the remaining space since optimizing to max area would take 99%
{"rectangle_id":"e64d","leftX":35,"rightX":61.28,"yTop":274,"yBottom":300},
{"rectangle_id":"b653","yTop":276,"yBottom":940,"leftX":61.28,rightX:71.28},
{"rectangle_id":"fca3","leftX":35,"rightX":61.28,"yTop":300,"yBottom":315}
]
// the function name is really long to reflect what it is what I want to do. Don't normally make functions this intense
const optimizeLeftAndRightXStartPointsForNormalizedRectangleAreaWithoutOverlapping = (rectangles,minimumArea,minimumWidth,xMin,xMax)=>{
// TODO : fill in the optimization function.
// Code I'm looking for would be swapped in here if you wanted to make changes to demo it do it here
if(rectangles === rectanglesYcoordinatesOnlyExample1 && minimumArea === (33.3 * 15) && minimumWidth === 10 && xMin === 0 && xMax === 100){ // Just handling the example
return expectedResultMoreOrLessForExample1;
} else {
console.log('I only know how to handle example 1, as computed by a human, poorly. fill in the function and replace the block with working stuff');
return [];
}
}
const displayResults = (completedRectangleList) => {
const rectangleColors = ['cyan','magenta','green','yellow','orange']
completedRectangleList.forEach((rectangle,index) =>{
let newRectangle = document.createElement('div');
newRectangle.style.position = 'absolute';
newRectangle.style.height = rectangle.yBottom - rectangle.yTop + 'px';
newRectangle.style.top = rectangle.yTop + 'px';
newRectangle.style.left = parseInt(rectangle.leftX)+'%';
newRectangle.style.width = rectangle.rightX - rectangle.leftX + "%";
newRectangle.style.backgroundColor = rectangleColors[index % rectangleColors.length];
newRectangle.innerHTML = rectangle.rectangle_id;
if(rectangle.isMax){
newRectangle.innerHTML += '- more hidden';
}
document.body.appendChild(newRectangle);
})
}
// I am calling this function with minimum Area of 33.3 * 15, because it represents 3 min height rectangles taking up a third of the minX,maxX values, which are 0 & 100, representing a percentage value ultimately
let resultForExample1 = optimizeLeftAndRightXStartPointsForNormalizedRectangleAreaWithoutOverlapping(rectanglesYcoordinatesOnlyExample1,(33.3 * 15),10,0,100);
displayResults(resultForExample1);
就我所尝试的而言,我开始了一些事情,然后我想到了一些边缘案例,事情变得有点混乱。即使在我脑海中计算的预期结果中,我认为我自己的人性化计算有点偏离,所以在评估这个问题并查看我的预期结果然后对其进行渲染时,它有点偏离。希望背后的意图和含义optimizeLeftAndRightXStartPointsForNormalizedRectangleAreaWithoutOverlapping()
或多或少是清楚的。
我仍在研究潜在的方法,但同时寻求群众的智慧,直到找到我。我对解决方案很好奇,但我还没有找到正确的轨道。