D3.js - API фигур

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

Настройка API

Вы можете настроить API фигур с помощью следующего скрипта.

<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)- Он используется для создания дуги с указанными заданными аргументами. Настройки по умолчанию с радиусами и углами объекта определены ниже.

<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])- Этот метод используется для установки внутреннего радиуса из заданного радиуса и возврата генератора дуги. Это определено ниже -

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

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

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

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

function cornerRadius() {
   return 0;
}

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

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

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

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

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

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

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

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

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

API пирогов

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

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

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

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

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

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

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

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

  • padAngle - угол наклона дуги.

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

function value(d) {
   return d;
}

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

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

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

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

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

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

function startAngle() {
   return 0;
}

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

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

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

function padAngle() {
   return 0;
}

Линии API

Lines API используется для создания строки. Мы использовали эти методы API вGraphsглаву. Давайте подробно рассмотрим каждый из методов.

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

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

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

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

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

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

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

function defined() {
  return true;
}

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

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

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

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

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