Я пытаюсь изменить порядок элементов в DOM для выбора D3 (v4). В этой выборке D3 постоянно появляются новые элементы, удаляются старые элементы, а некоторые элементы остаются рядом, и я выполняю обработку для каждой конкретной группы (и выполняю переходы и тому подобное).
В конце я хочу изменить порядок элементов DOM, чтобы определенные элементы находились на переднем плане, но я всегда получаю "TypeError: u.parentNode is undefined", генерируемый D3.
function updateDraw() {
var items = getItems();
var s = mySVG.selectAll('g').data(items, d => d.id);
// the new items that weren't there before
var enter = s
.enter()
.append('g');
enter
.append('circle')
// more here
// the items that were there before
s.selectAll('circle')
.transition()
// more here
// stuff in common with all items (newly added or still there)
enter.merge(s)
.selectAll('circle')
// more here
// the items that are no longer there
s.exit()
.selectAll('circle')
// more here
// re-order the DOM to match our new order for everything that is still there
s.enter().merge(s).sort((a,b) => { .... });
s.enter().merge(s).order();
}
Даже если я удаляю строку сортировки и просто пытаюсь упорядочить элементы в соответствии с порядком по умолчанию, я получаю ту же ошибку. Если у меня нет строк sort()
или order()
, то страница загружается и работает отлично, просто мои круги в плохом порядке.
Есть идеи, что здесь происходит? Я не могу просто отсортировать items
перед выполнением каких-либо операций D3, потому что некоторые элементы DOM, которые уже существуют на странице, необходимо переупорядочить.