Графические элементы

Создание графических форм

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

Применение SVG позволяет легко рисовать простейшие графические примитивы и затем из них складывать более сложные фигуры. Отличительной особенностью SVG является то, что эта технология позволяет применять стили CSS для настройки визуализации фигур, что дает нам дополнительный контроль над визуализацией.

Создание линий

Самый простейший примитив - это линия. Для ее создания надо использовать элемент line:

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

<script type="text/javascript">
var width = 400,
    height = 400;
        
var svg = d3.select("body").append("svg");
    
svg.attr("height", height)
    .attr("width", width);    
        
svg.append("line")
    .attr("x1", 20)
    .attr("y1", 30)
    .attr("x2", 300)
    .attr("y2", 300);
</script>
</body>
</html>
Линия в D3.js

Чтобы что-то нарисовать, нам нужно создать объект svg, который будет контейнером для всех остальных фигур. Его система координат начинается от верхнего левого угла, который условно имеет координаты (0, 0), и идет вправо вниз. При создании этого объекта необходимо задать его ширину и высоту.

Чтобы создать линию, добавляется элемент line вместе с атрибутами x1, x2, y1, y2, которые задают две точки, по которым линия строится.

В css с помощью свойств stroke и stroke-width задаются цвет и толщина линии соответственно.

В итоге будет создан следующий элемент:

<svg height="400" width="400">
	<line x1="20" y1="30" x2="300" y2="300"></line>
</svg>

Стилизацию элементов не обязательно задавать через css, ее можно также определить динамически через метод style:

svg.append("line")
	.style("stroke", "gray")
	.style("stroke-width", "2")
    .attr("x1", 20)
    .attr("y1", 30)
    .attr("x2", 300)
    .attr("y2", 300);

Создание круга

Для создания круга используется элемент circle:

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

<script type="text/javascript">
var width = 400,
    height = 400;
        
var svg = d3.select("body").append("svg");
    
svg.attr("height", height)
    .attr("width", width);    
        
svg.append("circle") 
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("r", 50);
</script>
</body>
</html>

Для построения круга необходима точка - центр окружности, координаты которой задаются атрибутами cx и cy. И также нужен радиус, определяемый атрибутом r.

Круг в d3.js

В результате будет создан элемент:

<svg height="400" width="400">
    <circle cx="100" cy="100" r="50"></circle>
</svg>

При создании круга и других замкнутых фигур и путей надо не забывать про css-свойство fill. При значении fill: none; круг получатся не заполненный цветом. Но мы можем указать цвет заполнения, например, fill: yellow;, то получим закрашенный круг:

Круг в d3.js

Прямоугольники

Для создания прямоугольника применятся элемент rect. Определим в js-коде добавление элемента:

svg.append("rect")
	.style("fill", "none")
	.style("stroke", "red")
	.style("stroke-width", "2")
    .attr("x", 30)
    .attr("y", 20)
    .attr("width", 100) 
    .attr("height", 100)
    .attr("rx", 5);

При добавлении прямоугольника надо указать атрибуты х и y, указывающие на координаты левого верхнего угла, а также атрибуты width (ширина) и height (высота). И также опционально можно указать радиус для углов прямоугольника с помощью атрибута rx.

Прямоугольник в d3.js

В итоге получится следующий элемент:

<svg height="400" width="400">
    <rect style="fill: none; stroke: red; stroke-width: 2;" 
			x="30" y="20" width="100" height="100" rx="5"></rect>
</svg>

Многоугольники

Для создания более сложных фигур в виде многоугольников используется элемент polygon:

svg.append("polygon")
	.style("fill", "none")
	.style("stroke", "steelblue")
	.style("stroke-width", "2")
    .attr("points", "50,250 150,50 250,250");

Атрибут points задает массив точек, по которым строится многоугольник. В данном случае это три точки (50,250), (150,50) и (250,250), которые последовательно соединяются линиями.

Многоугольники в d3.js

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

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