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

Question

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

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

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

Answer 1

Трансформации - это преобразования SVG (подробности см. На странице standard). В основном, масштабирование и перевод применяют соответствующие преобразования в систему координат, которые должны работать как ожидалось в большинстве случаев. Однако вы можете применить несколько преобразований (например, первую шкалу, а затем перевести), а затем результат может быть не таким, каким вы ожидаете.

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

Answer 2

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

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

Answer 3

Scott Murray has a great explanation. Например, для фрагмента кода:

svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(" + x + "," + y + ")") 
    .call(xAxis); 

Он объясняет, используя следующее:

Обратите внимание, что мы используем Attr() для преобразования в качестве атрибута г. Преобразования SVG довольно мощные и могут принимать различные виды определений преобразований, включая масштабы и вращения. Но мы имеем , сохраняя здесь просто преобразование перевода, которое просто толкает всю группу g на некоторую величину.

перевода преобразования указаны с легким синтаксиса перевода (х, у), где х и у, очевидно, количество горизонтальных и вертикальных пикселей, на которое перемещается элемент.