Контуры используются для рисования прямоугольников, кругов, эллипсов, полилиний, многоугольников, прямых линий и кривых. Пути SVG представляют собой контур фигуры, который может быть обведен, заполнен, использован в качестве обтравочного контура или любой комбинации всех трех. В этой главе подробно описывается API-интерфейс Paths.
Конфигурирование путей
Вы можете настроить API Paths, используя скрипт ниже.
<script src = "https://d3js.org/d3-path.v1.min.js"></script> <script> </script>
Методы API Paths
Некоторые из наиболее часто используемых методов API Paths кратко описаны ниже.
-
d3.path () — этот метод используется для создания нового пути.
-
path.moveTo (x, y) — этот метод используется для перемещения указанных значений x и y.
-
path.closePath () — Этот метод используется для закрытия текущего пути.
-
path.lineTo (x, y) — этот метод используется для создания линии от текущей точки до определенных значений x, y.
-
path.quadraticCurveTo (cpx, cpy, x, y) — этот метод используется для рисования квадратичной кривой от текущей точки до указанной точки.
-
path.bezierCurveTo (cpx1, cpy1, cpx2, cpy2, x, y) — этот метод используется для рисования кривой Безье от текущей точки до указанной точки.
-
path.arcTo (x1, y1, x2, y2, radius) — этот метод используется для рисования дуги окружности от текущей точки до указанной точки (x1, y1) и окончания линии между указанными точками (x1, y1) и (х2, у2).
-
path.arc (x, y, radius, startAngle, endAngle [, против часовой стрелки]) — этот метод используется для рисования дуги окружности в указанном центре (x, y), radius, startAngle и endAngle. Если значение против часовой стрелки равно true, то дуга рисуется в направлении против часовой стрелки, в противном случае она рисуется в направлении по часовой стрелке.
-
path.rect (x, y, w, h) — этот метод используется для создания нового подпути, содержащего только четыре точки (x, y), (x + w, y), (x + w, y + h) , (х, у + ч). Эти четыре точки, соединенные прямыми линиями, обозначают подпуть как закрытый. Эквивалентно context.rect и использует SVG-команды «lineto».
-
path.toString () — Возвращает строковое представление этого пути в соответствии со спецификацией данных пути SVG.
d3.path () — этот метод используется для создания нового пути.
path.moveTo (x, y) — этот метод используется для перемещения указанных значений x и y.
path.closePath () — Этот метод используется для закрытия текущего пути.
path.lineTo (x, y) — этот метод используется для создания линии от текущей точки до определенных значений x, y.
path.quadraticCurveTo (cpx, cpy, x, y) — этот метод используется для рисования квадратичной кривой от текущей точки до указанной точки.
path.bezierCurveTo (cpx1, cpy1, cpx2, cpy2, x, y) — этот метод используется для рисования кривой Безье от текущей точки до указанной точки.
path.arcTo (x1, y1, x2, y2, radius) — этот метод используется для рисования дуги окружности от текущей точки до указанной точки (x1, y1) и окончания линии между указанными точками (x1, y1) и (х2, у2).
path.arc (x, y, radius, startAngle, endAngle [, против часовой стрелки]) — этот метод используется для рисования дуги окружности в указанном центре (x, y), radius, startAngle и endAngle. Если значение против часовой стрелки равно true, то дуга рисуется в направлении против часовой стрелки, в противном случае она рисуется в направлении по часовой стрелке.
path.rect (x, y, w, h) — этот метод используется для создания нового подпути, содержащего только четыре точки (x, y), (x + w, y), (x + w, y + h) , (х, у + ч). Эти четыре точки, соединенные прямыми линиями, обозначают подпуть как закрытый. Эквивалентно context.rect и использует SVG-команды «lineto».
path.toString () — Возвращает строковое представление этого пути в соответствии со спецификацией данных пути SVG.
пример
Давайте нарисуем простую линию в D3, используя path API. Создайте веб-страницу linepath.html и добавьте в нее следующие изменения.
<!DOCTYPE html>
<meta charset = "UTF-8">
<head>
<title>SVG path line Generator</title>
</head>
<style>
path {
fill: green;
stroke: #aaa;
}
</style>
<body>
<svg width = "600" height = "100">
<path transform = "translate(200, 0)" />
</svg>
<script src = "https://d3js.org/d3.v4.min.js"></script>
<script>
var data = [[0, 20], [50, 30], [100, 50], [200, 60], [300, 90]];
var lineGenerator = d3.line();
var pathString = lineGenerator(data);
d3.select('path').attr('d', pathString);
</script>
</body>
</html>
Теперь запросите браузер и мы увидим следующий результат.