d3-path

Предположим, у вас есть код, который рисует на двумерном холсте:

function drawCircle(context, radius) {
  context.moveTo(radius, 0);
  context.arc(0, 0, radius, 0, 2 * Math.PI);
}

Модуль d3-path позволяет взять этот код и дополнительно отрисовать его в SVG. Он работает, сериализуя вызовы CanvasPathMethods в данные SVG пути. Например:

const context = d3.path();
drawCircle(context, 40);
pathElement.setAttribute("d", context.toString());

Теперь написанный вами код может быть использован как с холстом (для производительности), так и с SVG (для удобства). Для практического примера, см. d3-shape.

Установка

Если вы используете npm, npm install d3-path. Вы также можете скачать последнюю версию на GitHub. В современных браузерах вы можете импортировать d3-path с jsDelivr:

<script type="module">

import {path} from "https://cdn.jsdelivr.net/npm/d3-path@3/+esm";

const p = path();
p.moveTo(1, 2);
p.lineTo(3, 4);
p.closePath();

</script>

Для устаревших сред вы можете загрузить UMD-пакет d3-path с CDN, основанной на npm, такой как jsDelivr; экспортируется глобальная переменная d3.

<script src="https://cdn.jsdelivr.net/npm/d3-path@3"></script>
<script>

const path = d3.path();

</script>

Справочник по API

d3.path() · Исходный код, Примеры

Создаёт новый сериализатор путей, который реализует CanvasPathMethods.

path.moveTo(x, y)

Перемещает указанную точку ⟨x, y⟩. Эквивалентно context.moveTo и команде SVG “moveto”.

path.closePath()

Завершает текущую подпуть и вызывает автоматическое рисование прямой линии от текущей точки к начальной точке текущей подпути. Эквивалентно context.closePath и команде SVG “closepath”.

path.lineTo(x, y)

Рисует прямую линию от текущей точки до указанной точки ⟨x, y⟩. Эквивалентно context.lineTo и команде SVG “lineto”.

path.quadraticCurveTo(cpx, cpy, x, y)

Рисует квадратный Bézier-сегмент от текущей точки до указанной точки ⟨x, y⟩ с указанной контрольной точкой ⟨cpx, cpy⟩. Эквивалентно context.quadraticCurveTo и командам SVG квадратичных кривых Bézier.

path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y)

Рисует кубический Bézier-сегмент от текущей точки до указанной точки ⟨x, y⟩ с указанными контрольными точками ⟨cpx1, cpy1⟩ и ⟨cpx2, cpy2⟩. Эквивалентно context.bezierCurveTo и командам SVG кубических кривых Bézier.

path.arcTo(x1, y1, x2, y2, radius)

Рисует сегмент дуги окружности с указанным радиусом, который начинается касательно линии между текущей точкой и указанной точкой ⟨x1, y1⟩ и заканчивается касательно линии между указанными точками ⟨x1, y1⟩ и ⟨x2, y2⟩. Если первая точка касания не равна текущей точке, рисуется прямая линия между текущей точкой и первой точкой касания. Эквивалентно context.arcTo и использует команды SVG эллиптических дуг.

path.arc(x, y, radius, startAngle, endAngle[, anticlockwise])

Рисует сегмент дуги окружности с заданным центром ⟨x, y⟩, радиусом, углом начала и углом конца. Если anticlockwise истинно, дуга рисуется против часовой стрелки, иначе — по часовой стрелке. Если текущая точка не равна начальной точке дуги, рисуется прямая линия от текущей точки до начала дуги. Эквивалентно context.arc и использует команды SVG эллиптических дуг.

path.rect(x, y, w, h)

Создаёт новую подпуть, содержащую только четыре точки ⟨x, y⟩, ⟨x + w, y⟩, ⟨x + w, y + h⟩, ⟨x, y + h⟩, соединённые прямыми линиями, и помечает подпуть как замкнутый. Эквивалентно context.rect и использует команды SVG “lineto”.

path.toString()

Возвращает строковое представление этого пути согласно спецификации данных пути SVG.

d3.pathRound(digits = 3) · Исходный код, Примеры

Подобно d3.path, но ограничивает цифры после запятой указанным числом digits.