D3.js — API форм

В этой главе рассматриваются различные генераторы формы в D3.js.

Конфигурирование API

Вы можете настроить API Shapes, используя следующий скрипт.

<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script src = "https://d3js.org/d3-shape.v1.min.js"></script>
<script>

</script>

Генераторы форм

D3.js поддерживает разные формы. Давайте подробно рассмотрим выдающиеся фигуры.

Arcs API

Генератор дуги создает форму круга или кольца. Мы использовали эти методы API в предыдущей главе круговых диаграмм. Давайте разберемся в различных методах API Arcs.

• d3.arc () — этот метод используется для создания нового генератора дуги.

• arc (args) — используется для генерации дуги с указанными заданными аргументами. Настройки по умолчанию с радиусами и углами объекта определены ниже.

d3.arc () — этот метод используется для создания нового генератора дуги.

arc (args) — используется для генерации дуги с указанными заданными аргументами. Настройки по умолчанию с радиусами и углами объекта определены ниже.

<script>
   var arc = d3.arc();
   arc({
      innerRadius: 0,
      outerRadius: 100,
      startAngle: 0,
      endAngle: Math.PI / 2
   });
</script>

• arc.centroid (args) — этот метод используется для вычисления средней точки [x, y] центральной линии дуги с указанными аргументами.

• arc.innerRadius ([radius]) — Этот метод используется для установки внутреннего радиуса из заданного радиуса и возврата генератора дуги. Это определено ниже —

arc.centroid (args) — этот метод используется для вычисления средней точки [x, y] центральной линии дуги с указанными аргументами.

arc.innerRadius ([radius]) — Этот метод используется для установки внутреннего радиуса из заданного радиуса и возврата генератора дуги. Это определено ниже —

function innerRadius(d) {
   return d.innerRadius;
}

• arc.outerRadius ([radius]) — Этот метод используется для установки внешнего радиуса из заданного радиуса и возврата генератора дуги. Это определяется следующим образом.

arc.outerRadius ([radius]) — Этот метод используется для установки внешнего радиуса из заданного радиуса и возврата генератора дуги. Это определяется следующим образом.

function outerRadius(d) {
   return d.outerRadius;
}

• arc.cornerRadius ([radius]) — Этот метод используется для установки радиуса угла из заданного радиуса и возврата генератора дуги. Это определяется следующим образом.

arc.cornerRadius ([radius]) — Этот метод используется для установки радиуса угла из заданного радиуса и возврата генератора дуги. Это определяется следующим образом.

function cornerRadius() {
   return 0;
}

Если радиус угла больше нуля, углы дуги округляются с использованием окружностей данного радиуса. Радиус угла не может быть больше, чем (externalRadius — innerRadius) / 2.

• arc.startAngle ([angle]) — Этот метод используется для установки начального угла для функции от заданного угла. Это определяется следующим образом —

arc.startAngle ([angle]) — Этот метод используется для установки начального угла для функции от заданного угла. Это определяется следующим образом —

function startAngle(d) {
   return d.startAngle;
}

• arc.endAngle ([angle]) — Этот метод используется для установки конечного угла для функции из заданного угла. Это определяется следующим образом.

arc.endAngle ([angle]) — Этот метод используется для установки конечного угла для функции из заданного угла. Это определяется следующим образом.

function endAngle(d) {
   return d.endAngle;
}

• arc.padAngle ([angle]) — Этот метод используется, чтобы установить угол пэда для функции от заданного угла. Это определяется следующим образом.

arc.padAngle ([angle]) — Этот метод используется, чтобы установить угол пэда для функции от заданного угла. Это определяется следующим образом.

function padAngle() {
   return d && d.padAngle;
}

• (x) arc.padRadius ([radius]) — этот метод используется для установки радиуса площадки для указанной функции из заданного радиуса. Радиус площадки определяет фиксированное линейное расстояние, разделяющее соседние дуги, определяемое как padRadius * padAngle.

• (xi) arc.context ([context]) — этот метод используется для установки контекста и возврата генератора дуги.

(x) arc.padRadius ([radius]) — этот метод используется для установки радиуса площадки для указанной функции из заданного радиуса. Радиус площадки определяет фиксированное линейное расстояние, разделяющее соседние дуги, определяемое как padRadius * padAngle.

(xi) arc.context ([context]) — этот метод используется для установки контекста и возврата генератора дуги.

API пирогов

Этот API используется для создания генератора пирогов. Мы выполнили эти методы API в предыдущей главе. Мы обсудим все эти методы подробно.

• d3.pie () — Создает новый круговой генератор с настройками по умолчанию.

• pie (data [, arguments]) — этот метод используется для создания круговой диаграммы для заданных значений массива. Возвращает массив объектов. Объекты являются базовыми углами дуги. Каждый объект имеет следующие свойства —

  • данные — исходные данные; соответствующий элемент во входном массиве данных.

  • значение — числовое значение дуги.

  • index — индекс дуги.

  • startAngle — начальный угол дуги.

  • endAngle — конечный угол дуги.

  • padAngle — угол площадки дуги.

• pie.value ([value]) — Этот метод используется для установки значения для указанной функции и создает круговую диаграмму. Это определяется следующим образом —

d3.pie () — Создает новый круговой генератор с настройками по умолчанию.

pie (data [, arguments]) — этот метод используется для создания круговой диаграммы для заданных значений массива. Возвращает массив объектов. Объекты являются базовыми углами дуги. Каждый объект имеет следующие свойства —

данные — исходные данные; соответствующий элемент во входном массиве данных.

значение — числовое значение дуги.

index — индекс дуги.

startAngle — начальный угол дуги.

endAngle — конечный угол дуги.

padAngle — угол площадки дуги.

pie.value ([value]) — Этот метод используется для установки значения для указанной функции и создает круговую диаграмму. Это определяется следующим образом —

function value(d) {
   return d;
}

• pie.sort ([сравнить]) — этот метод используется для сортировки данных в указанной функции и генерирует круговую диаграмму. Функция компаратора определяется следующим образом.

pie.sort ([сравнить]) — этот метод используется для сортировки данных в указанной функции и генерирует круговую диаграмму. Функция компаратора определяется следующим образом.

pie.sort(function(a, b) 
   { return a.name.localeCompare(b.name); }
);

Здесь функция сравнения принимает два аргумента ‘a’ и ‘b’, каждый элемент из массива входных данных. Если дуга для «a» должна быть перед дугой для «b», то компаратор должен вернуть число меньше нуля. Если дуга для «a» должна быть после дуги для «b», то компаратор должен вернуть число больше нуля.

• pie.sortValues ​​([сравнить]) — этот метод используется для сравнения значения из данной функции и генерирует круговую диаграмму. Функция определяется следующим образом.

pie.sortValues ​​([сравнить]) — этот метод используется для сравнения значения из данной функции и генерирует круговую диаграмму. Функция определяется следующим образом.

function compare(a, b) {
   return b - a;
}

• pie.startAngle ([angle]) — Этот метод используется, чтобы установить начальный угол круговой диаграммы для указанной функции. Если угол не указан, возвращается текущий начальный угол. Это определяется следующим образом.

pie.startAngle ([angle]) — Этот метод используется, чтобы установить начальный угол круговой диаграммы для указанной функции. Если угол не указан, возвращается текущий начальный угол. Это определяется следующим образом.

function startAngle() {
   return 0;
}

• pie.endAngle ([angle]) — Этот метод используется для установки конечного угла круговой диаграммы в указанную функцию. Если угол не указан, возвращается текущий конечный угол. Это определяется следующим образом.

pie.endAngle ([angle]) — Этот метод используется для установки конечного угла круговой диаграммы в указанную функцию. Если угол не указан, возвращается текущий конечный угол. Это определяется следующим образом.

function endAngle() {
   return 2 * Math.PI;
}

• pie.padAngle ([angle]) — Этот метод используется, чтобы установить угол пэда для указанной функции и генерирует круговую диаграмму. Функция определяется следующим образом.

pie.padAngle ([angle]) — Этот метод используется, чтобы установить угол пэда для указанной функции и генерирует круговую диаграмму. Функция определяется следующим образом.

function padAngle() {
   return 0;
}

API линий

Lines API используется для генерации линии. Мы использовали эти методы API в главе « Графики» . Давайте рассмотрим каждый метод в деталях.

• d3.line () — этот метод используется для создания генератора новой строки.

• line (data) — этот метод используется для генерации строки для данного массива данных.

• line.x ([x]) — Этот метод используется для установки метода доступа x указанной функции и создает строку. Функция определена ниже,

d3.line () — этот метод используется для создания генератора новой строки.

line (data) — этот метод используется для генерации строки для данного массива данных.

line.x ([x]) — Этот метод используется для установки метода доступа x указанной функции и создает строку. Функция определена ниже,

function x(d) {
   return d[0];
}

• line.y ([y]) — Этот метод используется для установки метода доступа y к указанной функции и генерирует строку. Функция определяется следующим образом.

line.y ([y]) — Этот метод используется для установки метода доступа y к указанной функции и генерирует строку. Функция определяется следующим образом.

function y(d) {
   return d[1];
}

• line.defined ([определено]) — этот метод используется для установки определенного метода доступа к указанной функции. Это определяется следующим образом.

line.defined ([определено]) — этот метод используется для установки определенного метода доступа к указанной функции. Это определяется следующим образом.

function defined() {
  return true;
}

• line.curve ([кривая]) — используется для установки кривой и генерации линии.

• line.context ([context]) — Этот метод используется для установки контекста и генерирует строку. Если контекст не указан, возвращается ноль.

• d3.lineRadial () — этот метод используется для создания новой радиальной линии; это эквивалентно декартовой линии генератора.

• lineRadial.radius ([radius]) — этот метод используется для рисования радиальной линии, а средство доступа возвращает радиус. Требуется расстояние от начала координат (0,0).

line.curve ([кривая]) — используется для установки кривой и генерации линии.

line.context ([context]) — Этот метод используется для установки контекста и генерирует строку. Если контекст не указан, возвращается ноль.

d3.lineRadial () — этот метод используется для создания новой радиальной линии; это эквивалентно декартовой линии генератора.

lineRadial.radius ([radius]) — этот метод используется для рисования радиальной линии, а средство доступа возвращает радиус. Требуется расстояние от начала координат (0,0).

В следующей главе мы узнаем об API цветов в D3.js.