Skip to content

RU Переходы

Jump to bottom Edit New page
mingun edited this page Jun 9, 2014 · 6 revisions

Вики ▸ Справка по API ▸ Ядро ▸ Переходы
English | Русский

Переход — это специальный тип выборки, в котором операторы применяются постепенно в течении длительного времени, а не мгновенно. Получить переход из выборки можно с использованием оператора transition. Хотя в целом переходы поддерживают тот же набор операторов, что и выборки (например, attr и style), не все операторы поддерживаются; например, вы должны присоединить элементы до начала перехода. Оператор remove предназначен для удобного удаления operator элементов при завершении перехода.

Переходы могут иметь поэлементные задержки и продолжительности, вычисляемые от данных, как и в других операторах. Это позволяет очень просто варьировать переходы для различных элементов на основе самих данных, либо их индексов. Например, вы можете отсортировать элементы а затем проварьировать переход для лучшего восприятия изменения порядка элементов во время перехода. За дополнительными сведениями по данному методу обращайтесь к книге «Анимированные переходы в графиках статистических данных» («Animated Transitions in Statistical Data Graphics») от Хира и Робертсона (Heer & Robertson).

D3 имеет множество встроенных интерполяторов для упрощения перехода между различными значениями. Например, вы можете перейти от строки "500 12px sans-serif", описывающей шрифт, к строке "300 42px sans-serif" и D3 найдёт числа, «зашитые» в строке и автоматически проинтерполирует размер и насыщенность шрифта. Так же вы можете интерполировать различные вложенные объекты и массивы или данные элемента path в SVG. D3 позволяет писать пользовательские интерполяторы с использованием операторов attrTween и styleTween, если вам будет недостаточно встроенных интерполяторов. Интерполяторы D3 предоставляют основу для шкал и могут использоваться и вне переходов; интерполятор — это функция, отображающая параметрическое значение t в домене [0, 1] на цвет, число или любое другое произвольное значение.

На данном элементе в заданный момент времени активным может быть только один переход. Однако, несколько переходов могут быть запланированы на одном элементе; при условии, что они совершаются поочерёдно, переходы будут выполняться в заданной последовательности. Если на данном элементе запускается новый переход, он неявно отменяет любые старые переходы, в том числе запланированные, но ещё не выполенные. Это позволяет новым переходам, например, возникшим в ответ на событие пользователя, вытеснять старые, даже если эти старые переходы совершаются поэтапно или поочерёдно. Многоступенчатые переходы (переходы, создаваемые по событию "end" предыдущего перехода) имеют одинаковый «возраст», совпадающий с оригинальным переходом; внутри это отслеживается монотонно-возрастающим уникальным идентификатором, который наследуется при создании многоступенчатого перехода.

Что бы узнать больше о переходат, прочтите урок Работа с переходами.

Запуск перехода

Переходы создаются путём вызова на выборке оператора transition. Переход начинается автоматически после своего создания после задержки, по умолчанию равной нулю; однако, следует заметить, что переход с «нулевой задержкой» на самом деле начинается спустя примерно 17 мс, обусловленных задержкой вызова функции обратного вызова. Продолжительность перехода по умолчанию составляет 250 мс.

# d3.transition([selection])

Создаёт анимированный переход. Этот метод эквивалентен коду d3.select(document).transition(). Способ используется редко, так как обычно проще получить переход из существующей выборки, а не выборку из существующего перехода.

При вызове с необязательным аргументом selection, этот метод обычно возвращает указанную выборку; то есть, он ничего не делает. Однако, внутри контекста transition.each, этот метод создаёт новый переход для указанной выборки, наследующий задержку, продолжительность и другие свойства родительского перехода. Это полезно для реализации переиспользуемых компонентов, которые могут быть вызваны как на выборках, так и на переходах, в последнем случае поддерживаются зависимые одновременные переходы. В качестве примера можно посмотреть на стандартный компонент осей D3.

# transition.delay([delay])

Определяет задержку delay в миллисекундах перед началом перехода. Если параметр delay является константой, все элементы будут иметь одинаковую задержку; в противном случае, если delay — функция, она вычисляется для каждого элемента (в порядке следования элементов в выборке); параметрами передаются текущая привязка к данным d и текущий индекс i, контекст this внутри функции привязывается к текущему элементу DOM. Возвращаемое значение функции используется для установки задержки для каждого элемента. Задержка по умолчанию равна нулю. Если задержка delay не указана, возвращает задержку, привязанную к первому ненулевому элементу в переходе.

Установка задержки в зависимости от индекса i — удобный способ последовательного запуска перехода на элементах. Например, если вы используете неизменную продолжительность duration и имеете n элементов в текущей выборке, вы можете поочерёдно запустить переходы с продолжительностью 2 * duration, написав:

.delay(function(d, i) { return i / n * duration; })

Также вы можете вычислять задержку в зависимости от данных, создав таким образом анимацию, управляемую данными.

# transition.duration([duration])

Определяет поэлементную продолжительность duration в миллисекундах. Если параметр duration является константой, все элементы будут иметь одинаковую продолжительность; в противном случае, если duration — функция, она вычисляется для каждого элемента (в порядке следования элементов в выборке); параметрами передаются текущая привязка к данным d и текущий индекс i, контекст this внутри функции привязывается к текущему элементу DOM. Возвращаемое значение функции используется для установки продолжительности для каждого элемента. Продолжительность по умолчанию равна 250 мс. Если продолжительность duration не указана, возвращает продолжительность, привязанную к первому ненулевому элементу в переходе.

# transition.ease([value[, arguments]])

Определяет функцию сглаживания для перехода. Если параметр value является функцией, она используется для сглаживания текущего параметрического значения времени t, которое обычно находится в диапазоне [0,1] (в конце перехода t может быть значительно больше единицы). В противном случае, value считается строкой и аргументы передаются в метод d3.ease для генерации функции сглаживания. Функция сглаживания по умолчанию — «cubic-in-out». Обратите внимание, что невозможно настроить функцию сглаживания поэлементно или поатрибутно; однако, если вы используетте функцию сглаживания «linear», вы можете применить собственное сглаживание внутри интерполятора, используя методы attrTween или styleTween. Если параметр value не указан, возвращает функцию сглаживания, привязанную к первому ненулевому элементу в переходе.

Операции над переходами

Содержимое

# transition.attr(name, value)

Переводит значение атрибута с заданным именем name до указанного значения value. Начальным значением перехода является текущее значение атрибута (убедитесь, что вы установили начальное значение заранее, если не хотите неприятных сюрпризов), а конечным — указанное значение value. Если параметр value является константой, все элементы перейдут к одинаковому значению атрибута; в противном случае, если value — функция, она вычисляется для каждого элемента (в порядке следования элементов в выборке); параметрами передаются текущая привязка к данным d и текущий индекс i, контекст this внутри функции привязывается к текущему элементу DOM. Возвращаемое значение функции используется для установки перехода для каждого атрибута. Значения null не поддерживаются, поскольку интерполятор будет неопределённым; если вы хотите удалить атрибут позле завершения перехода, подпишитесь на событие end.

Интерполятор выбирается автоматически исходя из конечного значения. Если конечное значение — число, начальное значение приводится к числу и используется интерполятор interpolateNumber. Если конечное значение — строка, проверяется, является ли она представлением цвета в форме /^(#|rgb\(|hsl\()/, либо названием одного из именованных цветов в CSS; если так, начальное значение пирводится к цвету в формете RGB и используется интерполятор interpolateRgb. В противном случае используется interpolateString, которая интерполирует числа, «зашитые» в строке.

# transition.attrTween(name, tween)

Переводит значение атрибута с заданным именем name в соответствии с заданной функцией перехода tween. Начальное и конечное значения перехода определяются функцией tween; она вызывается при начале перехода на каждом элементе, параметрами передаются текущая привязка к данным d, текущий индекс i и текущее значение атрибута a, контекст this внутри функции привязывается к текущему элементу DOM. Возвращаемое значение функции должно быть интерполятором: функцией, отображающей параметрическое значение t в домене [0, 1] на цвет, число или любое другое произвольное значение.

Например, оператор attr построен на основе оператора attrTween. Функция перехода tween используется оператором attr в зависимости от того, является ли конечное значение функцией или константой. Если конечное значение — функция:

function tween(d, i, a) {
  return d3.interpolate(a, String(value.call(this, d, i)));
}

Иначе, если — константа:

function tween(d, i, a) {
  return d3.interpolate(a, String(value));
}

Оператор attrTween используется, если вам необходим собственный интерполятор, например, который понимает семантику данных в SVG-элементе path. Один общий метод — интерполяция области данных, в котором интерполятор interpolateObject используется для интерполяции двух значений и результат используется (скажем, вместе с фигурой) для вычисления нового значения атрибута. Используйте оператор attr для простых общих случаев, когда интерполятор может быть автоматически выведен из текущего значения атрибута и желаемого конечного значения.

# transition.style(name, value[, priority])

Переводит значение стилевого свойства CSS с заданным именем name до указанного значения value. Так же может быть указан необязательный параметр priority, который может быть либо null, либо строкой "important" (без восклицательного знака). Начальным значением перехода является текущее вычисленного значение стилевого свойства, а конечным значением — указанное значение value. Если параметр value является константой, все элементы перейдут к одинаковому значению стилевого свойства; в противном случае, если value — функция, она вычисляется для каждого элемента (в порядке следования элементов в выборке); параметрами передаются текущая привязка к данным d и текущий индекс i, контекст this внутри функции привязывается к текущему элементу DOM. Возвращаемое значение функции используется для установки перехода для каждого стилевого свойства. Значения null не поддерживаются, поскольку интерполятор будет неопределённым; если вы хотите удалить атрибут позле завершения перехода, подпишитесь на событие end.

Интерполятор выбирается автоматически исходя из конечного значения. Если конечное значение — число, начальное значение приводится к числу и используется интерполятор interpolateNumber. Если конечное значение — строка, проверяется, является ли она представлением цвета в форме /^(#|rgb\(|hsl\()/, либо названием одного из именованных цветов в CSS; если так, начальное значение пирводится к цвету в формете RGB и используется интерполятор interpolateRgb. В противном случае используется interpolateString, которая интерполирует числа, зашитые в строке.

Обратите внимание, что вычисленное начальное значение может отличаться от значения, которое было установлено ранее, например, если стилевое свойство было установлено через сокращённое свойство (например стиль "font" является сокращением для "font-size", "font-face" и т.д.). Более того, вычисленные размеры такий свойств, как «font-size» и «line-height», всегда представлены в пикселях, так что вы должны указывать конечное значение так же в пикселях, если вам это нужно.

# transition.styleTween(name, tween[, priority])

Переводит значение стилевого свойства CSS с заданным именем name в соответствии с заданной функцией перехода tween. Так же может быть указан необязательный параметр priority, который может быть либо null, либо строкой "important" (без восклицательного знака). Начальное и конечное значения перехода определяются функцией tween; она вызывается при начале перехода на каждом элементе, параметрами передаются текущая привязка к данным d, текущий индекс i и текущее значение атрибута a, контекст this внутри функции привязывается к текущему элементу DOM. Возвращаемое значение функции должно быть интерполятором: функцией, отображающей параметрическое значение t в домене [0, 1] на цвет, число или любое другое произвольное значение.

Например, оператор style построен на основе оператора styleTween. Функция перехода tween используется оператором style в зависимости от того, является ли конечное значение функцией или константой. Если конечное значение — функция:

function tween(d, i, a) {
  return d3.interpolate(a, String(value.call(this, d, i)));
}

Иначе, если — константа:

function tween(d, i, a) {
  return d3.interpolate(a, String(value));
}

Оператор styleTween используется, если вам необходим собственный интерполятор, например, который понимает семантику трансформаций CSS3. Используйте оператор style для простых общих случаев, когда интерполятор может быть автоматически выведен из текущего вычисленного значения стилевого свойства и желаемого конечного значения.

# transition.text(value)

Оператор text основывается на свойстве textContent; установка текстового содержимого заменит любые существующие дочерние элементы.

Устанавливает текстовое содержимое в указанное значение для всех выбранных элементов при начале перехода. Если value — константа, все элементы получат одинаковое текстовое содержимое; в противном случае, если value — функция, она вычисляется для каждого элемента (в порядке следования элементов в выборке); параметрами передаются текущая привязка к данным d и текущий индекс i, контекст this внутри функции привязывается к текущему элементу DOM. Возвращаемое значение функции используется для установки текстового содержимого элемента. Значение null означает, что содержимое нужно очистить.

# transition.tween(name, factory)

Регистрирует пользовательскую функцию перехода под указанным именем name. При начале перехода будет вызвана указанная функция factory для каждого выбранного элемента в переходе, параметрами передаются данные элемента d и индекс i, контекст this внутри функции привязывается к элементу. Фабрика должна вернуть функцию перехода, вызываемую во время перехода. Функция перехода вызывается несколько раз с передачей ей нормализованного времени t в диапазоне [0, 1]. Если factory возвратит null, функция перехода не будет запущена на выбранных элементах.

Этот метод используется внутри переходов attr и style и может использоваться для интерполяции любого содержимого документа. Например, для интерполяции текстового содержимого от 0 до 100:

selection.transition().tween("text", function() {
  var i = d3.interpolateRound(0, 100);
  return function(t) {
    this.textContent = i(t);
  };
});

Функции перехода часто пишутся через замыкания для захвата состояния, созданного в начале перехода. В примере выше, интерполятор i инициализируется во время начала перехода, а затем последовательно используется во время перехода (однако заметим, что в приведённом выше примере, начальное значение перехода жёстко указано нулём, в то время как в более общем случае начальное значение перехода основывается на текущем состоянии DOM).

# transition.remove()

Удаляет выбранные элементы в конце перехода. Если на любом выбранном элементе будет запланирован новый переход, эти элементы не будут удалены; однако, событие «end» всё равно будет отправлено.

Вложенные переходы

Переходы могут наследоваться от существующих переходов, аналогично вложенным выборкам. Вложенные переходы наследуют функцию смягчения, продолжительность и задержку из родительского перехода.

# transition.select(selector)

Для каждого элемента в текущем переходе, выбирает первого потомка, удовлетворяющего строке селектора selector. Если для текущего элемента соответствия с указанным селектором не нашлось, элемент по текущему индексу будет равен null в возвращённой выбоке; операторы (за исключением оператора data) автоматически пропускают нулевые элементы, тем самым сохраняя индекс существующей выборки. Если текущий элемент имеет ассоциированные с ним данные, эти данные будут унаследованы возвращённой вложенной выборкой и автоматически привязаны к новым выбранным элементам. Если селектору удовлетворяют несколько элементов, будет выбран только первый элемент в порядке обхода документа.

Этот метод приблизительно эквивалентен следующему коду:

selection.select(selector).transition()

где selection — базовая выборка текущего перехода. Кроме того, новый возвращённый переход наследует функцию смягчения, продолжительность и задержку из текущего перехода.

# transition.selectAll(selector)

Для каждого элемента в текущем переходе, выбирает всех потомков, удовлетворяющих строке селектора selector. Возвращённая выборка группируется по узлу родителя в текущей выборке. Если для текущего элемента соответствия с указанным селектором не нашлось, группа по текущему индексу будет равна null в возвращённой выборке. Вложенная выборка не наследует данные от текущей выборки; однако, если значение данные ранее были привязаны к выбранным элементам, эти данные будут доступны в операторах.

Этот метод приблизительно эквивалентен следующему коду:

selection.selectAll(selector).transition()

где selection — базовая выборка текущего перехода. Кроме того, новый возвращённый переход наследует функцию смягчения, продолжительность и задержку из текущего перехода. Продолжительность и задержка для каждого подэлемента наследуется от продолжительности и задержки родительского элемента в текущем переходе.

# transition.filter(selector)

Фильтрует переход, возвращает новый переход, содержащий только те элементы, что удовлетворяют указанному селектору selector. Параметр selector может быть либо функцией, либо строкой селектора, например ".foo". Как и другие операторы, функция принимает текущую привязку к данным d и индекс i, контекст this привязывается к текущему элементу DOM. Подобно встроенному методу массива filter, возвращаемая выборка не сохраняет индексы оригальной выборки; она возвращает копию с удалёнными элементами. Если вы хотите сохранить индексы, используйте select вместо этого. Например, для выбора каждого нечётного элемента (нумерация начинается с нуля):

var odds = transition.select(function(d, i) { return i & 1 ? this : null; });

Эквивалентное использование функции filter:

var odds = transition.filter(function(d, i) { return i & 1; });

Или с использованием селектора:

var odds = transition.filter(":nth-child(odd)");

Таким образом, вы можете использовать либо select, либо filter для применения операторов к подмножеству элементов.

# transition.transition()

Создаёт новый переход на тех же самых элементах, начинающийся с окончанием текущего. Новый переход наследует продолжительность и функцию сглаживания текущего перехода. Это можно использовать для определения цепочек переходов без необходимости подписываться на событие «end».

Управление

# transition.each([type, ]listener)

Если указан параметр type, добавляет слушатель событий перехода, поддерживающий события «start» и «end». Слушатель будет вызван для каждого элемента перехода.

Событие start вызывается во время первого асинхронного обратного вызова (тика) перехода, перед вызовом любых функций перехода. Для переходов с нулевой задержкой это обычно около 17 мс после того, как переход будет запланирован. Состояния событий полезны для применения мгновенных изменений к каждому элементу, например, когда атрибуты в цепочке не могут быть проинтерполированы.

Событие end вызывается во время последнего асинхронного обратного вызова (тика), после того, как истечёт время продолжительности и задержки перехода и после вызова всех функций перехода в момент времени t=1. Обратите внимание, что если переход был замещён переходом, запланированным позднее на данном элементе, событие end не будет отправлено для этого элемента; прерывание переходов не вызывает срабатывание событий end. Например, метод transition.remove планирует удаление каждого элемента при заканчивании перехода, но если переход будет прерван, элемент не будет удалён. Событие end может использоваться в качестве альтернативы методу transition.transition для создания цепочек переходов путём выбора текущего элемента, this и создания производного перехода.

Если параметр type не будет указан, поведение аналогично selection.each: немедленно вызывает указанную функцию function для каждого элемента в текущем переходе, параметрами передаются текущая привязка к данным d и текущий индекс i, контекст this внутри функции привязывается к текущему элементу DOM. Любые переходы, созданные внутри области видимости transition.each, унаследуют параметры текущего перехода, включая идентификатор, задержку, продолжительность и функцию смягчения. Таким образом, новые переходы, созданные внутри родительского transition.each не прервут родительский переход, как и вложенные переходы.

Метод transition.each может использоваться для соединения переходов в цепочку и применения общих временн́ых параметров к набору переходов. Например:

d3.transition()
  .duration(750)
    .ease("linear")
    .each(function() {
      d3.selectAll(".foo").transition()
          .style("opacity", 0)
         .remove();
    })
  .transition()
    .each(function() {
      d3.selectAll(".bar").transition()
        .style("opacity", 0)
        .remove();
    });

Путём использования d3.select(this) внутри transition.each вы даже можете унаследовать поочерёдную задержку набора выбранных элементов. Этот приём используется в компоненте осей для поддержки автоматических переходов.

Так же смотрите пример Выход, Обновление, Вход.

# transition.call(function[, arguments…])

Вызывает указанную функцию function один раз, передавая её в текущий переход вместе с любым количеством необязательных аргументов arguments. Оператор call всегда возвращает текущий переход, независимо от возвращаемого значения указанной функции. Оператор call идентичен ручному вызову функции; но он делает более простым использование цепочечных вызовов. Например, мы хотим установить несколько атрибутов одинаковым образом в нескольких различных местах. Так что мы пишем код и оборачиваем его в переиспользуемую функцию:

function foo(transition) {
  transition
    .attr("name1", "value1")
    .attr("name2", "value2");
}

Теперь мы можем написать так:

foo(d3.selectAll("div").transition())

Или эквивалентно так:

d3.selectAll("div").transition().call(foo);

Во многих случаях возможно вызывать одну и ту же функцию foo как на выборках, так и на переходах, благодаря их одинаковым методам! Контекст this вызываемой функции так же привязан к текущему переходу. Это немного излишне, поскольку у нас уже есть первый аргумент, возможно в будущем это будет поправлено.

# transition.empty()

Возвращяет true, если текущий переход пустой; переход пустой, если он не содержит ненулевые элементы.

# transition.node()

Возвращает первый ненулевой элемент в текущем переходе. Если переход пустой, возвращает null.

# transition.size()

Возвращает общее число элементов в текущем переходе.

Функция смягчения

# d3.ease(type[, arguments…])

Возвращает встроенную функцию смягчения указанного типа type, с необязательными аргументами arguments. Функция смягчения принимает текущее параметризированное значение времени t в домене [0, 1] и отображает его на другое значение в том же диапазоне; обычно используется для установки функции смягчения перехода. Поддерживаются следующие типы смягчения:

  • linear — единичная функция, t.
  • poly(k) — возводит t в указанную степень k (например, 3).
  • quad — эквивалентна poly(2).
  • cubic — эквивалентна poly(3).
  • sin — применяет тригонометрическую функцию sin.
  • exp — возводит 2 в степень на основе t.
  • circle — четверть окружности.
  • elastic(a, p) — имитирует резинку, может выходить за границы 0 и 1.
  • back(s) — имитирует парковку задом.
  • bounce — имитирует упругое столкновение.

Эти встроенные типы могут быть расширены путём использования различных режимов:

  • in — единичная функция.
  • out — переворачивает направление смягчения в диапазон [1, 0].
  • in-out — копирует и отражает функцию смягчения из диапазона [0, 0.5] в диапазон [0.5, 1].
  • out-in — копирует и отражает функцию смягчения из диапазона [1, 0.5] в диапазон [0.5, 0].

Функция смягчения по умолчанию — «cubic-in-out», предоставляющая анимацию со смягчением начала и завершения движения.

# ease(t)

По указанному параметрическому времени t, обычно в диапазоне [0, 1], возвращает смягчённое время. Возвращаемое значение тоже обычно в диапазоне [0, 1], но может немного выходить за его пределы для некоторый функций смягчения, например «elastic».

Таймеры

D3 внутри себя поддерживает эффективную очередь таймеров, так что тысячи таймеров могут обрабатываться одновременно практически без накладных расходов; кроме того, очередь гарантирует соблюдение последовательности анимаций при одновременном или поочерёдном планировании переходов. Если ваш браузер поддерживает requestAnimationFrame, то для очереди таймеров будет использоваться она для достижения плавной и эффективной анимации. Очередь таймеров так же знаект, когда лучше использовать setTimeout — когда есть длительная задержка перед следующим запланированным событием.

# d3.timer(function, [delay, [time]])

Запускает пользовательский таймер анимации, выполняя указанную функцию function до тех пор, пока она не вернёт true. Не существует способа остановить таймер после его запуска, так что убедитесь, что ваша функция возвращает true при завершении работы!

Необязательный числовой параметр delay указывает количество миллисекунд задержки, после которой должна выполниться функция. Задержка относительна указанному параметру time, указывающим вперя в миллисекундах, прошедшее с эпохи UNIX; если параметр time не указан, он по умолчанию равен Date.now.

Вы можете использовать параметры delay и time для указания относительных и абсолютных моментов во времени, когда функция function должна начать выполнение. Например, уведомление календаря может быть реализовано так:

d3.timer(notify, -4 * 1000 * 60 * 60, +new Date(2012, 09, 29)); // за четыре часа до полуночи 29 октября

# d3.timer.flush()

Немедленно выполняет (вызывает один раз) любые активные таймеры. Как правило, переходы с нулевой задержкой выполняются после мизерной задержки (менее 10 мс). Это может вызвать мелькание страницы, если браузер отображает страницу дважды: первый раз в конце первого цикла событий и второй сразу после обратного вызова от первого таймера. После сбрасывания очереди таймеров в конце первого цикла событий, вы сможете запустить любой переход с нулевой задержкой немедленно и тем самым избежать мерцания.

Интерполяция

D3 имеет множество свтроенных интерполяторов для упрощения переходов между произвольными значениями; интерполятор — это функция, отображающая параметрическое значение t в домене [0, 1] на цвет, число или любое другое произвольное значение.

# d3.interpolate(a, b)

Возвращает интерполятор по умолчанию между двумя значениями a и b. Тип интерполятора зависит от типа последнего значения b по следующему алгоритму:

  1. Если b является цветом, используется функция interpolateRgb.
  2. Если b является строкой, используется функция interpolateString.
  3. Если b является массивом, используется функция interpolateArray.
  4. Если b является объектом и не приводимо к числу, используется функция interpolateObject.
  5. Во всех остальных случаях используется функция interpolateNumber.

На основе выбранного интерполятора значение a приводится к соответствующему типу. Проверка на цвет применяется как к экземплярам d3.rgb и другим цветовым пространствам, так и к строкам в форме /^(#|rgb\(|hsl\()/ или именованным цветам CSS.

Поведение интерполятора по умолчанию может быть расширено для поддержки дополнительных типов путём добавления пользовательских интерполяторов в массив d3.interpolators.

# interpolate(t)

Принимает параметр t, обычно в диапазоне [0, 1], возвращает соответствующее интерполированное значение. Интерполяторы главным образом используются вместе со шкалами для отображения входного домена (например, количественного измерения) на выходной диапазон (например, диапазон цветов или позиции пикселей).

# d3.interpolateNumber(a, b)

Возвращает числовой интерполятор между двумя числами a и b. Возвращённый интерполятор эквивалентен следующему:

function interpolate(t) {
  return a * (1 - t) + b * t;
}

Внимание: избегайте интерполяции от или до числа ноль, когда интерполятор используется для генерирования строки (например, при использовании с оператором attr). Очень маленькие значения, при преобразовании их в строку, могут принять вид в экспоненциальном формате и вызвать временно недопустимое значение атрибута или стилевого свойства. Например, число 0.0000001 сконвертируется в строку "1e-7". Это особенно заметно при интерполяции значения прозрачности. Для предотвращения преобразования числа в экспоненциальный формат, начинайте или заканчивайте анимацию с числа 1e-6, которое является наименьшим значением, преобразуемым в строку не в экспоненциальном формате.

# d3.interpolateRound(a, b)

Возвращает числовой интерполятор между двумя числами a и b; интерполятор похож на interpolateNumber, за исключением того, что он округляет значение к ближайшему целому.

# d3.interpolateString(a, b)

Возвращает строковый интерполятор между двумя строками a и b. Строковый интерполятор ищет числа, зашытые в строках a и b, представленные в форме:

/[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g

Для каждого числа, «зашитого» в b, интерполятор пытается отыскать соответствующее число в a. Если соответствующее число найдено, создаётся числовой интерполятор с помощью interpolateNumber. Оставшаяся часть строки b используется как шаблон: статичные части строки b остаются неизменными во время интерполяции, интерполированные числа «зашиваются» в шаблон. Например, если a — строка "300 12px sans-serif", а b — строка "500 36px Comic-Sans", будут найдены два «зашитых» числа. Оставшиеся статичные части строки — пробел между двумя числами (" ") и суффикс ("px Comic-Sans"). Результат интерполяции при значении t = 0.5 — строка "400 24px Comic-Sans".

# d3.interpolateRgb(a, b)

Возвращает интерполятор цветового пространства RGB между двумя цветами a и b. Цвета a и b не обязательно должны быть в RGB, но они будут сконвертированы в RGB посредством функции d3.rgb. Красный, зелёный и синий каналы линейно интерполируются способом, эквивалентным interpolateRound, поскольку дробные значения каналов не допускаются. Возвращаемым значеним интерполятора является строка с цветом RGB в шестнадцатеричной записи.

# d3.interpolateHsl(a, b)

Возвращает интерполятор цветового пространства HSL между двумя цветами a и b. Цвета a и b не обязательно должны быть в HSL, но они будут сконвертированы в HSL посредством функции d3.hsl. Тон, насыщенность и светлота линейно интерполируются способом, эквивалентным interpolateNumber (используется кратчайший путь между начальным и конечным тоном). Возвращаемым значеним интерполятора является строка с цветом RGB в шестнадцатеричной записи.

# d3.interpolateLab(a, b)

Возвращает интерполятор цветового пространства L*a*b* между двумя цветами a и b. Цвета a и b при необходимости будут сконвертированы в L*a*b* посредством функции d3.lab. Цветовые каналы линейно интерполируются способом, эквивалентным interpolateNumber. Возвращаемым значеним интерполятора является строка с цветом RGB в шестнадцатеричной записи.

# d3.interpolateHcl(a, b)

Возвращает интерполятор цветового пространства HCL между двумя цветами a и b. Цвета a и b при необходимости будут сконвертированы в HCL посредством функции d3.hcl. Цветовые каналы линейно интерполируются способом, эквивалентным interpolateNumber (используется кратчайший путь между начальным и конечным тоном). Возвращаемым значеним интерполятора является строка с цветом RGB в шестнадцатеричной записи.

# d3.interpolateArray(a, b)

Возвращает интерполятор массивов между двумя массивами a и b. В реализации создаётся шаблон массива с длиной, равной длине массива b. Для каждого элемента в b, если существует соответствующий элемент в a, создаётся обобщённый интерполятов двух элементов через функцию interpolate. Если же соответствующего элемента не нашлось, в шаблоне используется просто значение b. Затем, для указанного параметра t вычисляются встроенные в шаблон массива интерполяторы. После возвращается обновлённый шаблон. Например, если a будет массивом [0, 1], а b — массивом [1, 10, 100], результатом интерполяции при t = 0.5 будет объект [0.5, 5.5, 100].

Обратите внимание: возвращается не копия шаблонного массива; модификация возвращённого массива может негативно повлиять на последующий результат интерполяции. Копия не создаётся, поскольку интерполятор должен быть быстрым, ибо он используется внутри цикла анимации.

<a name="d3_interpolateObject" wiki-d3_interpolateObject"># d3.interpolateObject(a, b)

Возвращает интерполятор объектов между двумя объектами a и b. В реализации создаётся шаблон объекта со свойствами, присутствующими в b. Для каждого свойства в b, если существует соответствующее свойство в a, создаётся обобщённый интерполятов двух элементов через функцию interpolate. Если же соответствующего свойства не нашлось, в шаблоне используется просто значение b. Затем, для указанного параметра t вычисляются встроенные в шаблон объекта интерполяторы и возвращается обновлённый шаблон. Например, если a будет объектом { x: 0, y: 1 }, а b — объектом { x: 1, y: 10, z: 100 }, результатом интерполяции при t = 0.5 будет массив { x: 0.5, y: 5.5, z: 100 }.

Интерполяция объектов особенно полезка для интерполяции в пространстве данных, когда интерполируются данные вместо значений атрибутов. Например, вы можете интерполировать объект, описывающий дугу в круговой диаграмме и затем использовать функцию d3.svg.arc для вычисления новых данных элемента path SVG.

Обратите внимание: возвращается не копия шаблонного объекта; модификация возвращённого объекта может негативно повлиять на последующий результат интерполяции. Копия не создаётся, поскольку интерполятор должен быть быстрым, ибо он используется внутри цикла анимации.

# d3.interpolateTransform(a, b)

Возвращает интерполятор между двумя двумерными афинными преобразованиями a и b. Каждое преобразование раскладывается на стандартное представление из смещения, поворота, наклона по оси x и масштабирования; затем эти компоненты преобразования интерполируются. Данное поведение стандартизировано CSS: смотрите декомпозицию матриц для анимации.

# d3.interpolateZoom(a, b)

Возвращает плавный интерполятор между двумя областями просмотра a и b двумерной плоскости на основе работы «Плавное и эффективное масштабирование и панорамирование» от Джарка Дж. ван Вийжка (Jarke J. van Wijk) и Вима А.А. Нуйи (Wim A.A. Nuij). Каждая область просмотра определяется массивом трёх чисел: cx, cy и width. Первые два значения cx, cy представляют координаты центра области просмотра; последнее значение width представляет размеры области просмотра. Возвращаемый интерполятор также содержит свойство duration, содержащее рекомендуемую продолжительность перехода в миллисекундах. Эта продолжительность вычисляется на основе длины пути по кривой траектории в пространстве x,y. Если вы хотите замедлить или ускорить переход, умножте это значение на масштабный коэффициент (в исходной работе назван V).

# d3.geo.interpolate(a, b)

Смотрите описание к d3.geo.interpolate.

# d3.interpolators

Массив встроенных фабрик интерполяторов, используемый функцией d3.interpolate. Дополнительные фабрики интерполяторов могут быть добавлены в конец массива. Каждая фабрика должна возвращать интерполятор, если он поддерживает интерполяцию между двумя указанными входными значениями; в противном случае фабрика должна возвращать ложное значение, чтобы могли опробоваться другие интерполяторы.

Например, для регистрации пользовательского интерполятора, форматирующего доллары и центы, вы можете написать:

d3.interpolators.push(function(a, b) {
  var re = /^\$([0-9,.]+)$/, ma, mb, f = d3.format(",.02f");
  if ((ma = re.exec(a)) && (mb = re.exec(b))) {
    a = parseFloat(ma[1]);
    b = parseFloat(mb[1]) - a;
    return function(t) {
      return "$" + f(a + b * t);
    };
  }
});

Тогда d3.interpolate("$20", "$10")(1/3) вернёт $16.67.

Add a custom footer
Add a custom sidebar
Clone this wiki locally