Трансформации и переходы

Трансформации

Трансформации являются одним из ключевых аспектов работы с D3.js. Выделяются три типа трансформаций:

• Масштабирование

• Перемещение

• Вращение

Все трансформации задаются для элемента с помощью атрибута transform. Для перемещения этот атрибут принимает значение translate(x, y):

var width = 400,
    height = 400;
			
var svg = d3.select("body").append("svg");

svg.attr("height", height)
    .attr("width", width);   
// оригинальный круг	
svg.append("circle")
	.style("fill", "none")
	.style("stroke", "steelblue")
	.style("stroke-width", "2")
    .attr("cx", 100)
    .attr("cy", 100)
    .attr("r", 50);
// круг с перемещением
svg.append("circle")
	.style("fill", "none")
	.style("stroke", "red")
	.style("stroke-width", "2")
	.attr("transform", "translate(50, 40)")
    .attr("cx", 100)
    .attr("cy", 100)
    .attr("r", 50);

Для масштабирования используется значение scale(s) (увеличение в s раз) или scale(sx, sy) (увеличение по горизонтали в sx раз и по вертикали в sy раз):

  
// оригинальный прямоугольник	
svg.append("rect")
	.style("fill", "none")
	.style("stroke", "steelblue")
	.style("stroke-width", "2")
    .attr("x", 80)
    .attr("y", 50)
	.attr('width', 50)
	.attr('height', 50);
// прямоугольник с увеличением в два раза
svg.append("rect")
	.style("fill", "none")
	.style("stroke", "red")
	.style("stroke-width", "2")
	.attr("transform", "scale(2)")
    .attr("x", 80)
    .attr("y", 50)
	.attr('width', 50)
	.attr('height', 50);

Для вращения фигур применяется значение rotate(degree,x,y), где первый параметр - угол в градусах поворота по часовой стрелке, а x и y - координаты центра точки поворота:

  
// оригинальный прямоугольник	
svg.append("rect")
	.style("fill", "none")
	.style("stroke", "steelblue")
	.style("stroke-width", "2")
    .attr("x", 80)
    .attr("y", 50)
	.attr('width', 50)
	.attr('height', 50);
// прямоугольник с поворотом на 45 градусов с центром (75, 75)
svg.append("rect")
	.style("fill", "none")
	.style("stroke", "red")
	.style("stroke-width", "2")
	.attr("transform", "rotate(45, 75, 75)")
    .attr("x", 80)
    .attr("y", 50)
	.attr('width', 50)
	.attr('height', 50);

При необходимости мы можем применять все или несколько трансформаций сразу:

  
svg.append("rect")
	.style("fill", "none")
	.style("stroke", "red")
	.style("stroke-width", "2")
	.attr("transform", "translate(0, -30),scale(1, 2),rotate(45, 105, 75)")
    .attr("x", 80)
    .attr("y", 50)
	.attr('width', 50)
	.attr('height', 50);

Переходы

Переходы (transitions) в D3.js подразумевают динамическое изменение свойств объекта в течение некоторого промежутка времени, то есть его анимацию. Для создания перехода используют тройку методов transition(), duration(duration) (устанавливает время перехода) и delay(duration) (устанавливает период задержки перед выполнением перехода). Параметр duration в последних двух методах задает время в миллисекундах:

var svg = d3.select("body").append("svg")
					.attr("height", 400)
					.attr("width", 400);    
svg.append("rect")
	.style("fill", "black")
	.style("stroke", "red")
	.style("stroke-width", "2")
    .attr("x", 80)
    .attr("y", 50)
	.attr('width', 50)
	.attr('height', 50)
	.transition()
	.duration(5000)
	.delay(200)
	.style("fill", "#ffffff")
	.style("stroke", "steelblue")
	.attr('width', 200)
	.attr('height', 180);

В данном случае устанавливается время анимации в 5000 миллисекунд и задержка в 200 миллисекунд. Если необходимость в функции delay() отсутствует, то мы ее можем опустить.

Далее определяется ряд стилей и атрибутов и их конченые значения. То есть в данном случае D3 будет осуществлять переход от цвета "black" к цвету "#ffffff". Библиотека автоматически рассчитает промежуточные показатели, которые будет принимать стилевое свойство fill между значениями "black" и "#ffffff".

То же самое относится к свойству "stroke" и атрибутам ширины и высоты.