D3 масштаб преобразования и перевод

Я попытался понять, как работает преобразование в D3, но я думаю, что не получил его.

Изменяет ли масштаб размер SVG-объекта? Значит, если я дам большой номер, размер объекта будет больше? Переводит ли перевод объект из одного места в другое? Я попробовал, но это не сработало, как я думал.

Не могли бы вы объяснить мне, как это должно работать?

Ответы

Ответ 1

Преобразования - это SVG-преобразования (подробнее см. Стандарт; вот несколько примеров). В основном, масштабирование и перевод применяют соответствующие преобразования к системе координат, которая в большинстве случаев должна работать как положено. Однако вы можете применить более одного преобразования (например, сначала масштабировать, а затем переводить), и тогда результат может оказаться не таким, как вы ожидаете.

При работе с преобразованиями имейте в виду, что они преобразовывают систему координат. В принципе, то, что вы говорите, верно: если вы примените масштаб> 1 к объекту, он будет выглядеть больше, и переводит переместит его в другое положение относительно других объектов.

Ответ 2

Скотт Мюррей написал отличное объяснение этого ^[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 "Очистка" интерактивной визуализации данных для Интернета, которая раньше была бесплатной и теперь находится за платным доступом.

Ответ 3

Я понимаю, что этот вопрос довольно старый, но хотел поделиться быстрой демонстрацией групповых преобразований, путей/форм и относительного позиционирования для всех, кто нашел их здесь, ища дополнительную информацию:

http://bl.ocks.org/dustinlarimer/6050773