Мобильная версияУ меня есть метки для каждой точки, и я пытаюсь разработать JavaScript, чтобы переместить их вверх от базовой линии, только если они сталкиваются с предыдущей точкой. Однако они движутся вверх независимо от того, сталкиваются они или нет.
Желаемое поведение: В первом примере (в зависимости от ширины экрана) ● Джульетта Фрэнсис. должен находиться внизу у базовой линии, а не вверху, так как он может находиться на базовой линии, не сталкиваясь с какими-либо предыдущими точками (упорядочено справа налево).
Я протестировал функцию столкновения, и она, кажется, работает. отлично. Проблема, похоже, либо в функциях swarm(), либо в функцияхcollidesAll().
Я ковырялся в этом уже пару дней и не нашел удалось заставить его работать. Вторая пара глаз будет признательна.
Код: Выделить всё
$(function() {
let $graphs = $('.graph')
let $firstSetOfNames = $('.graph:first-child .graph-dd')
const setup = () => {
let longest = 0
$firstSetOfNames.each(function() {
longest = ($(this).width() > longest) ? $(this).width() : longest
})
$graphs.css('padding-right', longest + 'px')
}
const collides = ($e1, $e2) => {
let e1x1 = $e1.offset().left
let e1x2 = e1x1.x1 + $e1.outerWidth( true )
let e2x1 = $e2.offset().left
let e2x2 = e2x1.x1 + $e2.outerWidth( true )
let x = ((e1x1 < e2x1) && (e2x1 < e1x2)) || ((e2x1 < e1x1) && (e1x1 < e2x2))
let y = parseInt($e1.css('--y'), 10) === parseInt($e2.css('--y'), 10)
return !!(x || y)
}
const collidesAll = ($people, $person, j) => {
for (let i = 0; i < j; i++) {
if (collides($person, $people.eq(i))) {
return true
}
}
return false
}
const swarm = () => {
$graphs.each(function(i) {
let $graph = $(this)
let $people = $($graph.find('.graph-dd').get().reverse())
$people.each(function(j) {
let $person = $(this)
let n = 1
if (0 === j) {
$person.css('--y', 1)
} else {
do {
$person.css('--y', n++)
} while (collidesAll($people, $person, j))
$graph.css('--yMax', n)
}
})
})
}
setup()
swarm()
})Код: Выделить всё
.graph {
margin: 2rem;
padding: calc(calc(var(--yMax, 0) * 1.1em) + 1rem) 1rem 1rem;
border: 1px solid black;
overflow: hidden;
}
.graph-dl {
position: relative;
display: flex;
margin: 0;
justify-content: space-between;
}
.graph-dl::before {
content: "";
position: absolute;
display: block;
height: 1px;
top: calc(50% - 0.5px);
left: 0;
right: 0;
background: gray;
z-index: -1;
}
.graph-dt {
background: black;
width: 1px;
height: 1em;
border: 0.5em solid white;
margin: 0 -0.5em;
}
.graph-dt span {
display: none;
}
.graph-dd {
position: absolute;
display: block;
top: 0.5em;
margin: 0 0 0 calc(-0.5ex - 1px);
left: calc(var(--percent) * 1%);
white-space: nowrap;
transform: translateY(calc(var(--y, 0) * -1.1em));
transition: transform 0.3s;
}
.graph-dd::before {
content: "";
display: inline-block;
background: blue;
width: 1ex;
height: 1ex;
vertical-align: baseline;
border-radius: 100%;
margin-right: 0.2em;
}Код: Выделить всё
0
Zaccaria Osmant
10
Nelli Dunge
Ethelind Evers
Juliet Francis
20
30
40
Myles Burdoun
50
Gregory Beade
60
Trenna Vigne
Dulcia Koubu
70
Amberly Wrightham
Barney Rawstorn
80
90
Nealson Helstrip
Asa Langwade
Malvin Imlaw
Joanie Clooney
100
Kristo Biskupski
0
10
20
30
40
Nelli Dunge
Myles Burdoun
50
Zaccaria Osmant
60
Trenna Vigne
Dulcia Koubu
Ethelind Evers
70
Amberly Wrightham
Barney Rawstorn
Kristo Biskupski
Joanie Clooney
Juliet Francis
Gregory Beade
Malvin Imlaw
80
Asa Langwade
90
Nealson Helstrip
100
Подробнее здесь: https://stackoverflow.com/questions/681 ... collapsing
