SVG-фигуры
Справочник API ▸ SVG ▸ SVG-фигуры
SVG имеет ряд встроенных простых фигур, таких как прямоугольники и окружности, выровненные по осям координат. Для большей гибкости можно использовать элемент SVG path в сочетании с генераторами данных путей D3.
Генератор фигур, такой как возвращаемый d3.svg.arc, является одновременно объектом и функцией. То есть: вы можете вызвать фигуру как любую другую функцию, и у фигуры есть дополнительные методы, которые изменяют её поведение. Как и другие классы в D3, фигуры следуют методу цепочки вызовов, где методы-сеттеры возвращают саму фигуру, что позволяет вызывать несколько сеттеров в одном выражении.
SVG-элементы
Все SVG-фигуры можно преобразовать с помощью атрибута transform. Преобразование можно применить непосредственно к фигуре или к содержащему её элементу g. Таким образом, когда фигура определена как "выровненная по осям координат", это означает лишь выравнивание по осям координат в локальной системе координат; вы всё равно можете вращать и преобразовывать фигуру. Фигуры можно заполнять и обводить с помощью стилей fill и stroke. (Вы также можете использовать атрибуты с такими же именами, но стили рекомендуются, так как они совместимы с внешними таблицами стилей.)
svg:rect x="0" y="0" width="0" height="0" rx="0" ry="0"
Элемент rect определяет прямоугольник, выровненный по осям координат. Верхний левый угол прямоугольника задаётся атрибутами x и y, а его размер — атрибутами width и height. Округлённый прямоугольник можно создать, используя необязательные атрибуты rx и ry.
svg:circle cx="0" cy="0" r="0"
Элемент circle определяет окружность на основе центральной точки и радиуса. Центр задаётся атрибутами cx и cy, а радиус — атрибутом r.
svg:ellipse cx="0" cy="0" rx="0" ry="0"
Элемент ellipse определяет эллипс, выровненный по осям координат, на основе центральной точки и двух радиусов. Центр задаётся атрибутами cx и cy, а радиусы — атрибутами rx и ry.
svg:line x1="0" y1="0" x2="0" y2="0"
Элемент line определяет отрезок прямой, начинающийся в одной точке и заканчивающийся в другой. Первая точка задаётся атрибутами x1 и y1, а вторая — атрибутами x2 и y2. Элемент line часто используется для рисования линий, направляющих линий, осей и меток.
svg:polyline points=""
Элемент polyline определяет набор соединённых прямых отрезков. Как правило, элементы polyline определяют открытые фигуры. Точки, составляющие полилинию, задаются атрибутом points. Примечание: в D3 обычно более удобно и гибко использовать генератор пути d3.svg.line в сочетании с элементом path.
svg:polygon points=""
Элемент polygon определяет замкнутую фигуру, состоящую из набора соединённых прямых отрезков. Точки, составляющие многоугольник, задаются атрибутом points. Примечание: в D3 обычно более удобно и гибко использовать генератор пути d3.svg.line в сочетании с элементом path. Линия может быть замкнута с помощью команды closepath "Z".
svg:text x="0" y="0" dx="0" dy="0" text-anchor="start"
Элемент text определяет графический элемент, состоящий из текста. Содержимое элемента text (см. оператор text) определяет символы, которые будут отображены. Позиция якоря элемента text контролируется атрибутами x и y; дополнительно, текст может быть смещён от якоря с помощью атрибутов dx и dy. Это смещение особенно удобно для управления отступом и базовой линией текста, поскольку вы можете использовать единицы "em", которые относительны к размеру шрифта. Горизонтальное выравнивание текста контролируется атрибутом text-anchor. Вот несколько примеров:
<svg:text text-anchor="start">left-align, bottom-baseline</svg:text> <svg:text text-anchor="middle">center-align, bottom-baseline</svg:text> <svg:text text-anchor="end">right-align, bottom-baseline</svg:text> <svg:text dy=".35em" text-anchor="start">left-align, middle-baseline</svg:text> <svg:text dy=".35em" text-anchor="middle">center-align, middle-baseline</svg:text> <svg:text dy=".35em" text-anchor="end">right-align, middle-baseline</svg:text> <svg:text dy=".71em" text-anchor="start">left-align, top-baseline</svg:text> <svg:text dy=".71em" text-anchor="middle">center-align, top-baseline</svg:text> <svg:text dy=".71em" text-anchor="end">right-align, top-baseline</svg:text>
Возможно, существует лучший способ указать базовую линию текста, используя свойства выравнивания базовой линии SVG baseline alignment properties, но они, похоже, не широко поддерживаются браузерами. Наконец, цвет шрифта обычно задаётся стилем fill (также можно использовать stroke), а шрифт контролируется стилями font, font-family, font-size и аналогичными стилями. Некоторые браузеры также поддерживают свойства CSS3, такие как text-shadow.
svg:path d="" transform=""
Элемент path представляет контур фигуры, который можно заполнить, обвести, использовать в качестве области обрезки или любое сочетание этих трёх вариантов. Атрибут d определяет данные пути, которые представляют собой мини-язык команд пути, такие как moveto (M), lineto (L) и closepath (Z). Элемент path является обобщением всех других фигур в SVG и может быть использован для рисования практически чего угодно!
Генераторы данных путей
Для упрощения построения атрибута d для элементов path, D3 включает ряд вспомогательных классов для генерации данных пути. Каждый генератор является функцией от данных. Таким образом, если ваши данные представляют собой последовательность координат xy, вы можете определить функции-акцессоры, которые генераторы пути используют для создания данных пути. Например, вы можете определить генератор линии:
var line = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("basis"); Затем позже вы можете использовать эту функцию для установки атрибута d:
g.append("path")
.attr("d", line); Любые данные, привязанные к g (в этом примере), будут переданы экземпляру line. Таким образом, данные должны быть заданы в виде массива. Для каждого элемента в массиве данных используются функции-акцессоры x и y для извлечения координат контрольных точек.
Генератор пути, такой как возвращаемый d3.svg.line, является одновременно объектом и функцией. То есть: вы можете вызвать генератор как любую другую функцию, и у генератора есть дополнительные методы, которые изменяют его поведение. Как и другие классы в D3, генераторы пути следуют методу цепочки вызовов, где методы-сеттеры возвращают сам генератор, что позволяет вызывать несколько сеттеров в одном выражении.
d3.svg.line()
Создаёт новый генератор линий с функциями-акцессорами x и y по умолчанию (которые предполагают, что входные данные представляют собой массив из двух элементов чисел; см. подробности ниже) и линейной интерполяцией. Возвращаемая функция генерирует данные пути для открытой кусково-линейной кривой или полилинии, как в диаграмме линий:
Изменяя интерполяцию, вы также можете генерировать сплайны и функции ступенчатого изменения. Также не бойтесь добавлять дополнительные команды пути в конце. Например, если вы хотите сгенерировать замкнутый путь, добавьте команду закрытия пути (Z):
g.append("path")
.attr("d", function(d) { return line(d) + "Z"; }); Генератор линий предназначен для совместной работы с генератором area. Например, при создании диаграммы областей вы можете использовать генератор областей со стилем заполнения и генератор линий со стилем обводки для выделения верхней кромки области. Поскольку генератор линий используется только для установки атрибута d, вы можете контролировать внешний вид линии с помощью стандартных стилей и атрибутов SVG, таких как fill, stroke и stroke-width.
line(data)
Возвращает строку данных пути для указанного массива элементов data или null, если путь пустой.
line.x([x])
Если x указан, устанавливает функцию-аксессор x в указанную функцию или константу. Если x не указан, возвращает текущую функцию-аксессор x. Этот аксессор вызывается для каждого элемента в массиве данных, переданного генератору линий. Функция-аксессор по умолчанию предполагает, что каждый входной элемент представляет собой массив из двух чисел:
function x(d) {
return d[0];
} Обычно функция-аксессор x указывается, потому что входные данные имеют другой формат или потому, что вы хотите применить шкалу scale. Например, если ваши данные заданы как объект с атрибутами x и y, а не с кортежем, вы можете получить доступ к этим атрибутам и применить масштабирование одновременно:
var x = d3.scale.linear().range([0, w]),
y = d3.scale.linear().range([h, 0]);
var line = d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); }); Функция-аксессор x вызывается так же, как и другие функции-значения в D3. Контекст this функции — текущий элемент в выборке. (Технически, тот же контекст this, который вызывает функцию line; однако, в обычном случае, когда генератор линий передаётся оператору attr, контекст this будет ассоциированным элементом DOM.) Функция получает два аргумента: текущий фрагмент данных (d) и текущий индекс (i). В этом контексте индекс — индекс в массиве контрольных точек, а не индекс текущего элемента в выборке. Функция-аксессор x вызывается ровно один раз на каждый фрагмент данных в порядке, заданном массивом данных. Таким образом, возможно указать недетерминированный аксессор, например, генератор случайных чисел. Также возможно указать функцию-аксессор x как константу, а не функцию, в этом случае все точки будут иметь одну и ту же координату x.
line.y([y])
Если y указан, устанавливает функцию-аксессор y в указанную функцию или константу. Если y не указан, возвращает текущую функцию-аксессор y. Этот аксессор вызывается для каждого элемента в массиве данных, переданного генератору линий. Функция-аксессор по умолчанию предполагает, что каждый входной элемент представляет собой массив из двух чисел:
function y(d) {
return d[1];
} Пример указания функции-аксессора y см. в аналогичном аксессоре x. Обратите внимание, что, как и большинство других графических библиотек, SVG использует верхний левый угол в качестве начала координат, а, следовательно, более высокие значения y находятся ниже на экране. Для визуализации мы часто хотим, чтобы начало координат было в нижнем левом углу; один из простых способов добиться этого — инвертировать диапазон шкалы y, используя range([h, 0]) вместо range([0, h]).
line.interpolate([interpolate])
Если interpolate указан, устанавливает режим интерполяции на указанную строку или функцию. Если interpolate не указан, возвращает текущий режим интерполяции. Поддерживаются следующие режимы интерполяции:
- linear - куски линейных отрезков, как в полилинии.
- linear-closed - соединяет линейные отрезки, чтобы сформировать многоугольник.
- step - чередует горизонтальные и вертикальные отрезки, как в ступенчатой функции.
- step-before - чередует вертикальные и горизонтальные отрезки, как в ступенчатой функции.
- step-after - чередует горизонтальные и вертикальные отрезки, как в ступенчатой функции.
- basis - B-сплайн с дублированием контрольных точек на концах.
- basis-open - открытый B-сплайн; может не пересекать начало или конец.
- basis-closed - замкнутый B-сплайн, как в цикле.
- bundle - эквивалентно basis, за исключением того, что параметр tension используется для выпрямления сплайна.
- cardinal - Cardinal-сплайн с дублированием контрольных точек на концах.
- cardinal-open - открытый Cardinal-сплайн; может не пересекать начало или конец, но будет пересекать другие контрольные точки.
- cardinal-closed - замкнутый Cardinal-сплайн, как в цикле.
- monotone - кубическая интерполяция, которая сохраняет монотонность по y.
Поведение некоторых из этих режимов интерполяции может быть дополнительно настраивается путем указания напряжённости.
Если interpolate является функцией, то эта функция будет вызвана для преобразования массива точек вида [[x0, y0], [x1, y1], …], возвращая строку данных SVG-пути, которая будет использована для отображения линии. «М» в начале строки подразумевается и не должно возвращаться. Например, линейная интерполяция реализуется как:
function interpolateLinear(points) {
return points.join("L");
} Это эквивалентно (и более эффективно, чем):
function interpolateLinear(points) {
var path = "";
for (var i = 0; i < points.length; i++) {
if (i) path += "L";
path += points[i][0] + "," + points[i][1];
}
return path;
} См. bl.ocks.org/3310323 для другого примера пользовательской интерполяции линий.
line.tension([tension])
Если tension указан, устанавливает напряженность интерполяции Cardinal-сплайна на указанное число в диапазоне [0, 1]. Если tension не указан, возвращает текущую напряженность. Напряженность влияет только на режимы интерполяции Bundle и Cardinal: bundle, cardinal, cardinal-open и cardinal-closed. По умолчанию напряженность равна 0,7. В некотором смысле это можно интерпретировать как длину касательной; 1 даст все нулевые касательные, а 0 даст Catmull-Rom-сплайн.
Обратите внимание, что напряженность должна быть указана как константа, а не как функция, так как она постоянна для всей линии. Однако все же возможно генерировать несколько линий с различными напряженностями с помощью одного и того же генератора. Например:
svg.selectAll("path")
.data([0, 0.2, 0.4, 0.6, 0.8, 1])
.enter().append("path")
.attr("d", function(d) { return line.tension(d)(data); }); В этом примере (см. живую версию) напряженность устанавливается перед каждым вызовом генератора линий, что приводит к линиям с одинаковыми данными, но разными путями.
line.defined([defined])
Получает или устанавливает функцию доступа, которая контролирует, где линия определена. Если defined указан, устанавливает новую функцию доступа и возвращает линию. Если defined не указан, возвращает текущую функцию доступа, которая по умолчанию равна function() { return true; }. Функция доступа defined может использоваться для определения, где линия определена и неопределена, что обычно полезно в сочетании с отсутствующими данными; сгенерированные данные пути автоматически будут разделены на несколько отдельных подпутей, пропускающих неопределенные данные. Например, если вы хотите игнорировать значения y, которые не являются числами (или неопределенными), вы можете сказать:
line.defined(function(d) { return !isNaN(d[1]); }); Если данные определены, но окружены неопределенными данными (или концом массива), эти данные не будут видны.
d3.svg.line.radial()
Создает новый генератор радиальных линий с функциями доступа по умолчанию radius и angle (которые предполагают, что входные данные — это массив из двух чисел; см. подробности ниже) и линейной интерполяцией. Возвращаемая функция генерирует данные пути для открытой кусковой линейной кривой или полилинии, как и с генератором линии Декартова пространства.
line(data)
Возвращает строку данных пути для указанного массива элементов data.
line.radius([radius])
Если radius указан, устанавливает функцию доступа radius к указанной функции или константе. Если radius не указан, возвращает текущую функцию доступа radius. Эта функция доступа вызывается для каждого элемента в массиве данных, переданном генератору линий. Функция доступа по умолчанию предполагает, что каждый входной элемент является массивом из двух чисел:
function radius(d) {
return d[0];
} Этот метод является преобразованием метода Декартовой line.x.
line.angle([angle])
Если angle указан, устанавливает функцию доступа angle к указанной функции или константе в радианах. Если angle не указан, возвращает текущую функцию доступа angle. Эта функция доступа вызывается для каждого элемента в массиве данных, переданном генератору линий. Функция доступа по умолчанию предполагает, что каждый входной элемент является массивом из двух чисел:
function angle(d) {
return d[1];
} Этот метод является преобразованием метода Декартовой line.y.
line.interpolate([interpolate])
См. метод Декартовой line.interpolate. Интерполяция происходит после проекции в декартово пространство.
line.tension([tension])
См. метод Декартовой line.tension. Интерполяция происходит после проекции в декартово пространство.
line.defined([defined])
См. метод Декартовой line.defined метод.
d3.svg.area()
Создает новый генератор областей с функциями доступа по умолчанию x, y0 и y1 (которые предполагают, что входные данные — это массив из двух чисел; см. подробности ниже) и линейной интерполяцией. Возвращаемая функция генерирует данные пути для замкнутой кусковой линейной кривой или многоугольника, как в диаграмме областей:
По сути, многоугольник формируется с помощью двух линий: верхняя линия формируется с помощью функций доступа x и y1 и идет слева направо; нижняя линия добавляется к этой линии с использованием функций доступа x и y0 и идет справа налево. Установив атрибут transform для поворота элемента пути на 90 градусов, вы также можете генерировать вертикальные области. Изменив интерполяцию, вы также можете сгенерировать сплайны и ступенчатые функции.
Генератор областей разработан для совместной работы с генератором линий. Например, при создании диаграммы областей вы можете использовать генератор областей со стилем заливки и генератор линий со стилем обводки, чтобы подчеркнуть верхний край области. Поскольку генератор областей используется только для установки атрибута d, вы можете контролировать внешний вид области, используя стандартные стили и атрибуты SVG, такие как fill.
Чтобы создать streamgraphs (стекированные диаграммы областей), используйте компоновщик stack. Этот компоновщик устанавливает атрибут y0 для каждого значения в ряду, который можно использовать из функций доступа y0 и y1. Обратите внимание, что каждый ряд должен иметь одинаковое количество значений в ряду, и каждое значение должно иметь одинаковую координату x; если у вас есть пропущенные данные или несогласованные координаты x по рядам, вы должны перевыбрать и проинтерполировать данные перед вычислением стекированного компоновщика.
area(data)
Возвращает строку данных пути для указанного массива элементов data или null, если путь пуст.
area.x([x])
Если x указан, устанавливает функцию доступа x к указанной функции или константе. Если x не указан, возвращает текущую функцию доступа x. Эта функция доступа вызывается для каждого элемента в массиве данных, переданном генератору областей. Функция доступа по умолчанию предполагает, что каждый входной элемент является массивом из двух чисел:
function x(d) {
return d[0];
} Как правило, функция доступа x задается, потому что входные данные имеют другой формат, или потому что вы хотите применить масштабирование. Например, если ваши данные заданы как объект с атрибутами x и y, а не кортежем, вы можете обратиться к этим атрибутам и применить масштабирование одновременно:
var x = d3.scale.linear().range([0, w]),
y = d3.scale.linear().range([h, 0]);
var area = d3.svg.area()
.x(function(d) { return x(d.x); })
.y0(h)
.y1(function(d) { return y(d.y); }); Функция доступа x вызывается так же, как и другие функции значений в D3. Контекст this функции — текущий элемент в выборе. (Технически, тот же контекст this, что и при вызове функции area; однако, в общем случае, когда генератор area передается оператору attr, контекст this будет ассоциированным элементом DOM.) Функция принимает два аргумента: текущие данные (d) и текущий индекс (i). В этом контексте индекс — индекс в массиве контрольных точек, а не индекс текущего элемента в выборе. Функция доступа x вызывается ровно один раз на данные, в порядке, указанном в массиве данных. Таким образом, возможно указать недетерминированную функцию доступа, такую как генератор случайных чисел. Также возможно указать функцию доступа x как константу, а не как функцию, в этом случае все точки будут иметь одинаковую координату x.
area.x0([x0])
…
area.x1([x1])
…
area.y([y])
…
area.y0([y0])
Если y0 указан, устанавливает функцию доступа y0 к указанной функции или константе. Если y0 не указан, возвращает текущую функцию доступа y0. Функция доступа по умолчанию — константа ноль, поэтому используется фиксированная база в y = 0. Пример задания функции доступа y0 см. в похожем методе доступа x.
area.y1([y1])
Если y1 указан, устанавливает функцию доступа y1 к указанной функции или константе. Если y1 не указан, возвращает текущую функцию доступа y1. Функция доступа по умолчанию предполагает, что каждый входной элемент — массив из двух чисел:
function y1(d) {
return d[1];
} Для примера указания y1-акцессора, см. аналогичный акцессор x. Обратите внимание, что, как и большинство других библиотек графики, SVG использует верхний левый угол в качестве начала координат, и, следовательно, более высокие значения y находятся ниже на экране. Для визуализации нам часто нужен источник в нижнем левом углу; один из простых способов добиться этого — инвертировать диапазон шкалы y, используя range([h, 0]) вместо range([0, h]).
area.interpolate([interpolate])
Если interpolate указан, устанавливает режим интерполяции на указанную строку или функцию. Если interpolate не указан, возвращает текущий режим интерполяции. Поддерживаются следующие именованные режимы:
- linear - куски линейных отрезков, как в полилинии.
- step - чередование горизонтальных и вертикальных отрезков, как в ступенчатой функции.
- step-before - чередование вертикальных и горизонтальных отрезков, как в ступенчатой функции.
- step-after - чередование горизонтальных и вертикальных отрезков, как в ступенчатой функции.
- basis - B-сплайн с дублированием контрольных точек на концах.
- basis-open - открытый B-сплайн; может не пересекать начало или конец.
- cardinal - Кардинальная сплайн, с дублированием контрольных точек на концах.
- cardinal-open - открытая кардинальная сплайн; может не пересекать начало или конец, но будет пересекать другие контрольные точки.
- monotone - кубическая интерполяция, которая сохраняет монотонность в y.
Поведение некоторых из этих режимов интерполяции может быть дополнительно настраиваемо с помощью указания напряжения. Технически, также поддерживаются режимы интерполяции basis-closed и cardinal-closed, но они имеют больший смысл в контексте линии, а не области.
Если interpolate является функцией, то эта функция будет вызвана для преобразования массива точек в формате [[x0, y0], [x1, y1], …], возвращая строку данных SVG-пути, которая будет использоваться для отображения области. «M» в начале строки подразумевается и не должен возвращаться. Например, линейная интерполяция реализуется следующим образом:
function interpolateLinear(points) {
return points.join("L");
} Это эквивалентно (и более эффективно, чем):
function interpolateLinear(points) {
var path = "";
for (var i = 0; i < points.length; i++) {
if (i) path += "L";
path += points[i][0] + "," + points[i][1];
}
return path;
} См. bl.ocks.org/3310323 для другого примера пользовательской интерполяции.
area.tension([tension])
Если tension указан, устанавливает напряженность интерполяции Cardinal сплайн на указанное число в диапазоне [0, 1]. Если tension не указан, возвращает текущее значение напряженности. Напряженность влияет только на режимы интерполяции Cardinal: cardinal, cardinal-open и cardinal-closed. Значение по умолчанию составляет 0,7. В некотором смысле, это можно интерпретировать как длину касательной; 1 даст все нулевые касательные, а 0 даст сплайн Катмулла-Рома. Обратите внимание, что напряженность должна быть указана как константа, а не как функция, поскольку она является константой для всей области.
area.defined([defined])
Получает или устанавливает функцию доступа, которая управляет тем, где область определена. Если defined указан, устанавливает новую функцию доступа и возвращает область. Если defined не указан, возвращает текущий акцессор, который по умолчанию равен function() { return true; }. Акцессор defined может быть использован для определения места, где область определена и неопределена, что обычно полезно в сочетании с отсутствующими данными; сгенерированные данные пути будут автоматически разбиты на несколько отдельных подпутей, пропуская неопределенные данные. Например, если вы хотите игнорировать значения y, которые не являются числом (или не определены), вы можете сказать:
area.defined(function(d) { return !isNaN(d[1]); }); d3.svg.area.radial()
…
area(data)
Возвращает строку данных пути для указанного массива элементов data.
area.radius([radius])
…
area.innerRadius([radius])
…
area.outerRadius([radius])
…
area.angle([angle])
…
area.startAngle([angle])
…
area.endAngle([angle])
…
d3.svg.arc()
Создает новый генератор дуги с функциями доступа к внутреннему радиусу, внешнему радиусу, начальному углу и конечному углу по умолчанию (которые предполагают, что входные данные — это объект с именованными атрибутами, соответствующими акцессорам; см. подробности ниже). Хотя акцессоры по умолчанию предполагают, что все размеры дуги динамически задаются, очень часто одно или несколько измерений задаются как константа, например, установка внутреннего радиуса равным нулю для круговой диаграммы. Возвращаемая функция генерирует данные пути для замкнутой сплошной дуги, как в круговой или кольцевой диаграмме:
На самом деле, возможны четыре формы: диск (когда внутренний радиус равен нулю, а угловой размах не менее 2π), сектор окружности (когда внутренний радиус равен нулю, а угловой размах меньше 2π), кольцо (когда внутренний радиус не равен нулю, а угловой размах не менее 2π) и кольцевой сектор (когда внутренний радиус не равен нулю, а угловой размах меньше 2π).
arc(datum[, index])
Возвращает строку данных пути для указанных datum. Можно указать необязательный index, который передается функциям доступа к дуге.
arc.innerRadius([radius])
Если radius указан, устанавливает акцессор внутреннего радиуса на указанную функцию или константу. Если radius не указан, возвращает текущий акцессор внутреннего радиуса, который по умолчанию равен:
function innerRadius(d) {
return d.innerRadius;
} Аргументы генератора дуги (обычно d и i) и контекст (this) передаются функции доступа. Функция доступа к внутреннему радиусу полезна для обработки данных в другом формате или для применения количественной шкалы для кодирования данных. Константа внутреннего радиуса может использоваться для создания стандартной круговой или кольцевой диаграммы.
arc.outerRadius([radius])
Если radius указан, устанавливает акцессор внешнего радиуса на указанную функцию или константу. Если radius не указан, возвращает текущий акцессор внешнего радиуса, который по умолчанию равен:
function outerRadius(d) {
return d.outerRadius;
} Аргументы генератора дуги (обычно d и i) и контекст (this) передаются функции доступа. Функция доступа к внешнему радиусу полезна для обработки данных в другом формате или для применения количественной шкалы для кодирования данных. Константа внешнего радиуса может использоваться для создания стандартной круговой или кольцевой диаграммы.
arc.cornerRadius([radius])
Если radius указан, устанавливает акцессор радиуса угла на указанную функцию или константу. Если radius не указан, возвращает текущий акцессор внешнего радиуса, который по умолчанию равен нулю. Хотя обычно используется постоянный радиус угла, радиус угла также может быть задан как функция. Аргументы генератора дуги (обычно d и i) и контекст (this) передаются функции доступа.
arc.padRadius([radius])
Если radius указан, устанавливает акцессор радиуса отступа на указанную функцию или константу. Если radius не указан, возвращает текущий акцессор радиуса отступа, который по умолчанию равен «auto». Метод «auto» радиуса отступа вычисляет радиус отступа на основе ранее вычисленных внутреннего и внешнего радиусов следующим образом:
function padRadius(innerRadius, outerRadius) {
return Math.sqrt(innerRadius * innerRadius + outerRadius * outerRadius);
} Эта реализация разработана для сохранения приблизительной относительной площади дуг в сочетании с pie.padAngle.
Радиус отступа — это радиус, на котором применяется угол отступа: номинальное расстояние отступа между параллельными краями смежных дуг определяется как padRadius * padAngle. (Расстояние отступа может быть меньше, если внутренний радиус мал по сравнению с углом отступа.) Обычно радиус отступа не нужно изменять с «auto», но он может быть полезен для обеспечения параллельных краев между дугами с различными внутренними или внешними радиусами, например, при расширении дуги при наведении.
Если радиус отступа задан как функция доступа, аргументы генератора дуги (обычно d и i) и контекст (this) передаются функции доступа.
arc.startAngle([angle])
Если angle указан, устанавливает акцессор начального угла на указанную функцию или константу. Если angle не указан, возвращает текущий акцессор начального угла, который по умолчанию равен:
function startAngle(d) {
return d.startAngle;
} Углы задаются в радианах; 0 соответствует 12 часам (отрицательное y) и движется по часовой стрелке, повторяясь при 2π. Если начальный угол задан как функция доступа, аргументы генератора дуги (обычно d и i) и контекст (this) передаются функции доступа.
Для создания круговых или кольцевых диаграмм вам необходимо вычислить начальный угол каждой дуги как конечный угол предыдущей дуги. Это можно удобно сделать, используя компоновщик pie, который принимает массив входных данных и возвращает объекты дуг с атрибутами startAngle и endAngle , совместимыми с акцессорами дуги по умолчанию.
arc.endAngle([angle])
Если angle указан, устанавливает акцессор конечного угла на указанную функцию или константу. Если angle не указан, возвращает текущий акцессор конечного угла, который по умолчанию равен:
function endAngle(d) {
return d.endAngle;
} Углы задаются в радианах; 0 соответствует 12 часам (отрицательное y) и движется по часовой стрелке, повторяясь при 2π. Если конечный угол задан как функция доступа, аргументы генератора дуги (обычно d и i) и контекст (this) передаются функции доступа.
Для построения круговых или кольцевых диаграмм вам необходимо вычислить конечный угол каждой дуги соответствующим образом. Это удобно сделать, используя макет круговой диаграммы, который принимает массив входных данных и возвращает объекты дуг с атрибутами startAngle и endAngle совместимыми с функциями доступа к дугам по умолчанию.
arc.padAngle([angle])
Если angle указан, устанавливает функцию доступа к углу заполнения до указанной функции или константы. Если angle не указан, возвращает текущую функцию доступа к углу заполнения, которая по умолчанию:
function padAngle(d) {
return d.padAngle;
} Углы задаются в радианах. Если угол заполнения задан как функция доступа, аргументы генератора дуги (обычно d и i) и контекст (this) передаются в функцию доступа.
Хотя угол заполнения можно задать как константу, предпочтительнее использовать функцию доступа к углу заполнения по умолчанию и вместо этого использовать pie.padAngle для вычисления соответствующего угла заполнения и повторного вычисления начального и конечного углов каждой дуги, чтобы сохранить приблизительные относительные площади.
arc.centroid(arguments…)
Вычисляет центр дуги, которая была бы сгенерирована из указанных входных arguments; обычно аргументы — это текущий элемент данных (d), и, необязательно, текущий индекс (i). Центроид определяется как середина в полярных координатах внутреннего и внешнего радиусов и начального и конечного углов. Это предоставляет удобное расположение для меток дуг. Например:
arcs.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) { return d.value; }); В качестве альтернативы вы можете использовать атрибут преобразования SVG для поворота текста в нужное положение, хотя вам может потребоваться преобразовать радианы обратно в градусы. Еще одна возможность — использовать элемент textPath, чтобы изогнуть метку по траектории дуги!
d3.svg.symbol()
Создает новый генератор символов с функциями доступа по умолчанию к типу и размеру (которые не делают предположений о входных данных и производят круг размером 64 квадратных пикселя; см. подробности ниже). В то время как функции доступа по умолчанию генерируют статические символы, обычно устанавливают одну или несколько функций доступа с помощью функции, например, устанавливая размер пропорционально размеру данных для диаграммы рассеяния. Возвращаемая функция генерирует данные траектории для различных символов, как и на точечной диаграмме:
Обратите внимание, что символ не включает функции доступа к x и y. Вместо этого вы можете использовать атрибут преобразования элемента пути transform для позиционирования символов, как в:
vis.selectAll("path")
.data(data)
.enter().append("path")
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
.attr("d", d3.svg.symbol()); В будущем мы можем добавить функции доступа к x и y для соответствия генераторам линий и областей. Символ будет центрирован в начале координат (0,0) локальной системы координат. Вы также можете использовать встроенные базовые фигуры SVG для создания многих из этих типов символов, хотя генератор символов D3 полезен в сочетании с элементами пути, поскольку вы можете легко изменять тип и размер символа как функцию данных.
symbol(datum[, index])
Возвращает строку данных пути для указанного datum. Можно указать необязательный index, который передается в функции доступа к символу.
symbol.type([type])
Если type указан, устанавливает функцию доступа к типу до указанной функции или константы. Если type не указан, возвращает текущую функцию доступа к типу. Функция доступа по умолчанию — константа «circle», и поддерживаются следующие типы:
- circle — круг.
- cross — греческий крест или знак плюс.
- diamond — ромб.
- square — квадрат со сторонами, параллельными осям.
- triangle-down — равнобедренный треугольник направленный вниз.
- triangle-up — равнобедренный треугольник направленный вверх.
Типы нормализованы для того, чтобы иметь одинаковую площадь в квадратных пикселях в соответствии с указанным размером. Однако обратите внимание, что размеры различных типов могут по-разному влиять на обводку и толщину обводки. Все типы предназначены для отображения при использовании только стиля заливки, хотя они обычно выглядят лучше при использовании как заливки, так и обводки.
Функция доступа к типу вызывается таким же образом, как и другие функции значения в D3. Контекст this функции — текущий элемент в выборе. (Технически, тот же контекст this, что и вызов функции дуги; однако в общем случае, когда генератор символов передается оператору attr, контекст this будет связанным элементом DOM.) Функция получает два аргумента: текущий элемент данных (d) и текущий индекс (i). Также можно задать функцию доступа к типу как константу, а не как функцию.
symbol.size([size])
Если size указан, устанавливает функцию доступа к размеру до указанной функции или константы в квадратных пикселях. Если size не указан, возвращает текущую функцию доступа к размеру. Значение по умолчанию равно 64. Эта функция доступа вызывается с аргументом, переданным генератору символов. Как правило, функция доступа к размеру задается как функция, когда вы хотите, чтобы размер символа кодировал количественное измерение данных, или как константа, если вы просто хотите сделать все точки больше или меньше. Если вы хотите указать радиус вместо размера, вы должны сделать это косвенно, например, используя шкалу pow с показателем 2.
d3.svg.symbolTypes
Массив поддерживаемых типов символов.
d3.svg.chord()
Создает новый генератор хорд с функциями доступа по умолчанию (которые предполагают, что входные данные — это объект с именованными атрибутами, соответствующими функциям доступа; см. подробности ниже). В то время как функции доступа по умолчанию предполагают, что размер хорд задаётся динамически, очень часто устанавливают один или несколько размеров, например, радиус, как постоянные значения. Возвращаемая функция генерирует данные пути для замкнутой фигуры, соединяющей две дуги с квадратичными кривыми Безье, как и на диаграмме хорд:
Генератор хорд часто используется в сочетании с генератором дуг, чтобы нарисовать кольцевые сегменты в начале и конце хорд. Кроме того, макет хорд полезен для генерации объектов, описывающих набор сгруппированных хорд из матрицы, совместимой с функциями доступа по умолчанию.
chord(datum[, index])
Возвращает строку данных пути для указанного datum. Можно указать необязательный index, который передается в функции доступа к хорде.
chord.source([source])
Если source указан, устанавливает функцию доступа к source до указанной функции или константы. Если source не указан, возвращает текущую функцию доступа к source. Цель функции доступа к source — вернуть объект, описывающий начальную дугу хорды. Возвращённый объект впоследствии передаётся функциям доступа radius, startAngle и endAngle. Это позволяет повторно использовать эти другие функции доступа для описания как начальной, так и конечной дуги хорды. Функция доступа по умолчанию предполагает, что входные данные — это объект с соответствующим образом именованными атрибутами:
function source(d) {
return d.source;
} Функция доступа к source вызывается так же, как и другие функции значений в D3. Контекст this функции — текущий элемент в выборе. (Технически, тот же контекст this, что и вызов функции дуги; однако в общем случае, когда генератор символов передаётся оператору attr, контекст this будет связанным элементом DOM.) Функция получает два аргумента: текущий элемент данных (d) и текущий индекс (i). Также можно задать функцию доступа к source как константу, а не как функцию.
chord.target([target])
Если target указан, устанавливает функцию доступа к target до указанной функции или константы. Если target не указан, возвращает текущую функцию доступа к target. Цель функции доступа к target — вернуть объект, описывающий конечную дугу хорды. Возвращённый объект впоследствии передаётся функциям доступа radius, startAngle и endAngle. Это позволяет повторно использовать эти другие функции доступа для описания как начальной, так и конечной дуги хорды. Функция доступа по умолчанию предполагает, что входные данные — это объект с соответствующим образом именованными атрибутами:
function target(d) {
return d.target;
} Функция доступа к target вызывается так же, как и другие функции значений в D3. Функция получает два аргумента: текущий элемент данных (d) и текущий индекс (i). Также можно задать функцию доступа к target как константу, а не как функцию.
chord.radius([radius])
Если radius указан, устанавливает функцию доступа к radius до указанной функции или константы. Если radius не указан, возвращает текущую функцию доступа к radius. Функция доступа по умолчанию предполагает, что описание входного источника или цели — это объект с соответствующим образом именованными атрибутами:
function radius(d) {
return d.radius;
} Функция доступа к radius вызывается так же, как и другие функции значений в D3. Функция получает два аргумента: текущее описание источника (полученное из текущего элемента данных, d) и текущий индекс (i). Также можно задать функцию доступа к radius как константу, а не как функцию.
chord.startAngle([angle])
Если startAngle указан, устанавливает функцию доступа к startAngle до указанной функции или константы. Если startAngle не указан, возвращает текущую функцию доступа к startAngle. Углы задаются в радианах; 0 соответствует 12 часам (отрицательная y) и изменяются по часовой стрелке, повторяясь при 2π. Функция доступа по умолчанию предполагает, что описание входного источника или цели — это объект с соответствующим образом именованными атрибутами:
function startAngle(d) {
return d.startAngle;
} Функция доступа к startAngle вызывается так же, как и другие функции значений в D3. Функция получает два аргумента: текущее описание источника или цели (полученное из текущего элемента данных, d) и текущий индекс (i). Также можно задать функцию доступа к startAngle как константу, а не как функцию.
chord.endAngle([angle])
Если указан endAngle, устанавливает endAngle-аксессор на указанную функцию или константу. Если endAngle не указан, возвращает текущий endAngle-аксессор. Углы задаются в радианах; 0 соответствует 12 часам (отрицательное y) и увеличивается по часовой стрелке, повторяясь через 2π. По умолчанию аксессор предполагает, что входное описание источника или цели — это объект с соответствующими именами атрибутов:
function endAngle(d) {
return d.endAngle;
} endAngle-аксессор вызывается аналогично другим функциям значений в D3. Функции передаются два аргумента: текущее описание источника или цели (полученное из текущего элемента данных, d) и текущий индекс (i). Также возможно указать endAngle-аксессор как константу, а не функцию.
d3.svg.diagonal()
Создает новый генератор диагоналей с функциями аксессоров по умолчанию (которые предполагают, что входные данные — это объект с именами атрибутов, соответствующими аксессорам; см. подробности ниже). Возвращаемая функция генерирует данные пути для кубического Безье, соединяющего точки источника и цели; касательные задаются таким образом, чтобы обеспечивать плавное слияние и расхождение при соединении узлов, как в диаграмме узлов-связей:
Хотя диагонали по умолчанию ориентированы в декартовых (выровненных по осям) координатах, их можно использовать в радиальных и других ориентациях с помощью проекции.
diagonal(datum[, index])
Возвращает строку данных пути для указанного datum. Можно указать необязательный index, который передается в функции аксессоров диагонали.
diagonal.source([source])
Если указан source, устанавливает source-аксессор на указанную функцию или константу. Если source не указан, возвращает текущий source-аксессор. Цель source-аксессора — вернуть объект вида {x, y}, описывающий начальную точку диагонали. (Возвращаемый объект затем передается в проекцию.) По умолчанию аксессор предполагает, что входные данные — это объект с соответствующими именами атрибутов:
function source(d) {
return d.source;
} source-аксессор вызывается так же, как и другие функции значений в D3. Контекст this функции — текущий элемент в выборе. (Технически, тот же контекст this, что и при вызове функции диагонали; однако в обычном случае, когда генератор символов передается в оператор attr, контекст this будет ассоциированным элементом DOM.) Функции передаются два аргумента: текущие данные (d) и текущий индекс (i). Также можно указать source-аксессор как константу, а не функцию.
diagonal.target([target])
Если указан target, устанавливает target-аксессор на указанную функцию или константу. Если target не указан, возвращает текущий target-аксессор. Цель target-аксессора — вернуть объект вида {x, y}, описывающий конечную точку диагонали. (Возвращаемый объект затем передается в проекцию.) По умолчанию аксессор предполагает, что входные данные — это объект с соответствующими именами атрибутов:
function target(d) {
return d.target;
} target-аксессор вызывается аналогично другим функциям значений в D3. Функции передаются два аргумента: текущие данные (d) и текущий индекс (i). Также можно указать source-аксессор как константу, а не функцию.
diagonal.projection([projection])
Если указана projection, устанавливает projection на указанную функцию. Если projection не указана, возвращает текущую projection. projection преобразует точку (например, возвращаемую аксессорами source и target) вида {x, y} в массив из двух чисел. По умолчанию аксессор предполагает, что входная точка — это объект с атрибутами x и y:
function projection(d) {
return [d.x, d.y];
} Таким образом, аксессор по умолчанию совместим с различными макетами узлов D3, включая tree, partition и cluster. Например, чтобы получить радиальную диагональ, предполагая, что атрибут y определяет радиус в пикселях, а атрибут x определяет угол в градусах:
function projection(d) {
var r = d.y, a = (d.x - 90) / 180 * Math.PI;
return [r * Math.cos(a), r * Math.sin(a)];
} projection вызывается аналогично другим функциям значений в D3. Функции передаются два аргумента: текущая точка источника или цели (полученная из текущих данных, d) и текущий индекс (i).
d3.svg.diagonal.radial()
…
diagonal(datum[, index])
Возвращает строку данных пути для указанного datum. Можно указать необязательный index, который передается в функции аксессоров диагонали.
© 2010–2016 Michael Bostock
Licensed under the BSD License.
https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md
