Создание путей и групп объектов

Последнее обновление: 1.11.2015

Создание путей

Пути представляют более сложные объекты по сравнению с простыми примитивами. Путь позволяет отобразить набор любых примитивов с заполнением или без заполнения цветом. Для создания пути определяется элемент path:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"> </script>
<style>
svg path{
    stroke: steelblue;
    fill: none;
    stroke-width: 2;
}
</style>
<body>

<script type="text/javascript">
var width = 400,
    height = 400;
// массив точек для создания пути
var data = [ 
	{x: 80, y: 50},{x: 110, y: 80},{x: 140, y: 90},
	{x: 170, y: 70},{x: 200, y: 60},{x: 230, y: 60},
	{x: 260, y: 70},{x: 290, y: 80},{x: 320, y: 70}
];
// функция, создающая по массиву точек линии
var line = d3.svg.line()
            .x(function(d){return d.x;})
            .y(function(d){return d.y;}); 
			
var svg = d3.select("body").append("svg");

svg.attr("height", height)
    .attr("width", width); 
	
// добавляем путь
svg.append("path").attr("d", line(data));

</script>
</body>
</html>
Создание путей в D3.js

В данном случае создается путь из линий. Для задания линий определяется набор точек в виде массива data. С помощью специальной функции d3.svg.line() генерируется набор линий. Ниже в эту вызов этой функции передается массив data:

svg.append("path").attr("d", line(data));

Для определения содержимого пути определяется атрибут d, который может принимать следующие команды:

  • M(абсолютные координаты) / m(относительны координаты): переместить на позицию (x y)

  • Z / z: завершение пути

  • L / l: провести линию к точке (x y)

  • C / c: провести кубическую кривую Безье к точке(x1 y1 x2 y2 x y)

  • Q / q: провести кубическую кривую Безье к точке(x1 y1 x y)

  • A / a: провести дугу по координатам (rx ry x-axis-rotation large-arc-flag sweep-flag x y)

И если мы посмотрим на сгенерированный код html, то увидим следующий элемент:

<svg height="400" width="400">
    <path d="M80,50L110,80L140,90L170,70L200,60L230,60L260,70L290,80L320,70"></path>
</svg>

Группы объектов

Мы можем добавлять различные примитивы и пути напрямую в элемент svg. Однако есть и другой способ - создание групп объектов. Такие группы задаются с помощью элемента g:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"> </script>
<body>
<script type="text/javascript">
var width = 400,
    height = 400;

var svg = d3.select("body").append("svg");

svg.attr("height", height)
    .attr("width", width);    
var g = svg.append("g");
// добавляем путь
g.append("circle")
	.style("fill", "none")
	.style("stroke", "steelblue")
	.style("stroke-width", "2") 
    .attr("cx", 100)
    .attr("cy", 100)
    .attr("r", 50);
	
g.append("rect")
	.style("fill", "none")
	.style("stroke", "steelblue")
	.style("stroke-width", "2")
    .attr("x", 30)
    .attr("y", 20)
    .attr("width", 100) 
    .attr("height", 100)
    .attr("rx", 5);
</script>
</body>
</html>

Групп в svg, задаваемых элементом g, может быть несколько. Преимущество использования групп заключается в том, что мы можем сразу к группе элементов применить трансформации, оставив при этом другие группы элементов нетронутыми.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850