Я попытался понять, как работает преобразование в D3, но я думаю, что не получил его.
Изменяет ли масштаб размер SVG-объекта? Значит, если я дам большой номер, размер объекта будет больше? Переводит ли перевод объект из одного места в другое? Я попробовал, но это не сработало, как я думал.
Не могли бы вы объяснить мне, как это должно работать?
Преобразования - это SVG-преобразования (подробнее см. Стандарт; вот несколько примеров). В основном, масштабирование и перевод применяют соответствующие преобразования к системе координат, которая в большинстве случаев должна работать как положено. Однако вы можете применить более одного преобразования (например, сначала масштабировать, а затем переводить), и тогда результат может оказаться не таким, как вы ожидаете.
При работе с преобразованиями имейте в виду, что они преобразовывают систему координат. В принципе, то, что вы говорите, верно: если вы примените масштаб> 1 к объекту, он будет выглядеть больше, и переводит переместит его в другое положение относительно других объектов.
Скотт Мюррей написал отличное объяснение этого [1]. Например, для фрагмента кода:
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
Он объясняет, используя следующее:
Обратите внимание, что мы используем attr(), чтобы применить transform в качестве атрибута g. SVG-преобразования довольно мощны и могут принимать несколько различных видов определений преобразования, включая масштабирование и вращение. Но мы сохраняем это простым, используя только трансляционное преобразование, которое просто толкает всю g группу вверх и вниз на некоторое количество.
Трансляционные преобразования задаются с помощью простого синтаксиса translate (x, y), где x и y - это, очевидно, количество горизонтальных и вертикальных пикселей, с помощью которых выполняется перевод элемента.
[1]: из главы 8 "Очистка" интерактивной визуализации данных для Интернета, которая раньше была бесплатной и теперь находится за платным доступом.
Я понимаю, что этот вопрос довольно старый, но хотел поделиться быстрой демонстрацией групповых преобразований, путей/форм и относительного позиционирования для всех, кто нашел их здесь, ища дополнительную информацию: