Good evening everyone. I am puzzled, I can not think over the algorithm for the graph. In what, actually, the problem is a screen. Here you can see that some elements of x have the same parameter. I can't think of a function for the second and subsequent elements. If there is an element with the same parameter x - you need to calculate the new y (position it above with a slight offset, approximately 10px to the right). Here is the code of the main calculation point.

function prepare(object) { var windowSizePX = 1140; var elemWidth = 20 var countBlocks = windowSizePX / elemWidth; var blockValue = 1000; var blockSizePercent = Math.round((100 / countBlocks) * 1000) / 1000 console.log(blockSizePercent, 'ele') var diapasonsArray = [] // range diapasons for(var key = 0; key < countBlocks; key++) { diapasonsArray.push([blockSizePercent * key, blockSizePercent * (key + 1)]) } console.log(diapasonsArray) // calculate percents for(var key = 0; key < object.length; key++){ object[key].percent = object[key].sum * 100 / blockValue; object[key].r = 10 object[key].y = 265 } // remember block number for each element for(var key = 0; key < object.length; key++){ for(var j = 0; j < diapasonsArray.length; j++) { if(object[key].percent >= diapasonsArray[j][0] && object[key].percent <= diapasonsArray[j][1]) { object[key].blockNumber = j } if(key !== 0) { if(object[key].test === object[key - 1].test) { object[key - 1].x = object[key - 1].blockNumber * 20 } } } } return object } 

How can y coordinate be calculated?

    2 answers 2

    Hm I tried to think and came up with just such a solution. Sorry I'm not a bighead. I hope more experienced people know a more elegant solution.

    And so here is my decision.

     const a = [ [5, 10], [5, 10], [5, 10], [10, 10], [12, 10], [10, 10] ]; const b = {}; a.forEach(function(el, index) { if (b[el[0]] && b[el[0]].value === el[0]) { el[1] += el[1] * b[el[0]].index; b[el[0]].index++; } else { b[el[0]] = { value: el[0], index: 1 }; } }); console.log(b); console.log(a); 

       function update_y_pos( objects ){ //массив объектов с x и y. var offset = 10; //на сколько сдвигать если дублируется x var x_vals = {}; //храним последнее значение y для каждого x for( var i = 0; i < objects.length; i++ ){ var obj = objects[i]; var x = obj.x; // берем значение x из объекта x_vals[ x ] = x in x_vals ? x_vals[ x ] + offset : obj.y; // если такой x уже видели то выставляет новое смещение, иначе берём значение y из объекта obj.y = x_vals[ x ] // обновляем значение y в объекте } return objects; //возвращаем все объекты } var obj = [ { x: 1, y: 1 }, {x:1, y: 1}, { x:2, y:1 } ]; update_y_pos(obj); 
      • Not quite correctly, the logic described, because of this confusion occurred. You declared an object x_vals, f refers to as an array. - Alexey Kopievskiy
      • x_vals [x] = x in x_vals? x_vals [x] + offset: obj.y; This moment in principle does not work - Alexey Kopievskiy
      • Corrected. Forgot to add initialization obj . - Arnial