Как решить проблему смещения дерева при перемещении или масштабировании?
Парни, неделю бьюсь с проблемой.
Есть код
https://jsfiddle.net/rfnj35xd/1/
Он нормально отрабатывает.
В событии клик, чтобы при клике на узел он перемещался в нужное место я добавил код
function click(event, d) { if (d && d.data) { // Проверяем, что d и d.data не являются undefined if (d.children) { d._children = d.children; d.children = null; } else if (d._children) { d.children = d._children; d._children = null; } else { console.log('d:', d) console.log('d.data:', d.data) console.log('d.name:', d.name) console.log('d.data.name:', d.data.name) console.log('d.data.id:', d.data.id) // window.location = d.data.url; } // // Вычисляем новые координаты x и y для перемещения g // x = -d.x + treeTop; y = -d.y + treeLeft; //Применяем перевод g с использованием новых координат g.transition().duration(duration).attr("transform", "translate(" + y + "," + x + ")"); //console.log("x: " + x + ", y: " + y); update(d); } } |
function click(event, d) { if (d && d.data) { // Проверяем, что d и d.data не являются undefined if (d.children) { d._children = d.children; d.children = null; } else if (d._children) { d.children = d._children; d._children = null; } else { console.log('d:', d) console.log('d.data:', d.data) console.log('d.name:', d.name) console.log('d.data.name:', d.data.name) console.log('d.data.id:', d.data.id) // window.location = d.data.url; } // // Вычисляем новые координаты x и y для перемещения g // x = -d.x + treeTop; y = -d.y + treeLeft; //Применяем перевод g с использованием новых координат g.transition().duration(duration).attr("transform", "translate(" + y + "," + x + ")"); //console.log("x: " + x + ", y: " + y); update(d); } }
Узел перемещается.
Но при перемещении или масштабировании дерево двигается не с места, где оно находится фактически, а перебрасывает на начальное положение и с него происходит движение.
Что только не делал.
svg.call(d3.zoom().on("zoom", function(event) { currentTransform = event.transform; // Обновляем текущее преобразование при каждом масштабировании g.attr("transform", currentTransform); // Применяем текущее преобразование })); |
svg.call(d3.zoom().on("zoom", function(event) { currentTransform = event.transform; // Обновляем текущее преобразование при каждом масштабировании g.attr("transform", currentTransform); // Применяем текущее преобразование }));
вобще кидает в положение 0 0 .
Перебрал кучу вариантов но ничего нормально не отработало.
Прошу помощи, даже готов заплатить. Заранее благодарю.
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для решения проблемы смещения дерева при перемещении или масштабировании вам следует использовать относительные единицы измерения в CSS, такие как проценты или em, вместо абсолютных значений, таких как пиксели.
Вот несколько рекомендаций, которые могут помочь вам избежать смещения дерева:
1. Используйте проценты или em для задания размеров и позиций элементов. Например, вместо задания ширины блока в пикселях, используйте ширину в процентах:
.container { width: 50%; }
2. Избегайте использования абсолютного позиционирования элементов, особенно вложенных элементов. Вместо этого используйте относительное позиционирование или flexbox для управления расположением элементов.
3. При масштабировании элементов учитывайте их относительное положение и размеры. Используйте медиазапросы для адаптивного дизайна, чтобы элементы корректно масштабировались на разных устройствах.
4. Проверьте, что у ваших элементов нет жестко заданных размеров или позиций, которые могут привести к смещению дерева при изменении размеров окна браузера.
5. Используйте инструменты разработчика браузера, такие как инспектор элементов, чтобы анализировать структуру и стили вашего дерева и идентифицировать проблемные элементы.
Следуя этим рекомендациям и используя относительные единицы измерения в CSS, вы сможете избежать смещения дерева при перемещении или масштабировании и создать более устойчивый и адаптивный дизайн для вашего веб-сайта.