Как применить отдельные параметры для смягчения переходов?

Я делаю переход к таким объектам, как

.transition()
.duration(600)
.delay(function(d, i) { return (500 - (i * 40)); })
.ease(d3.easeBackInOut)

В документации есть разные параметры, позволяющие управлять типом смягчения, например backInOut(t, 3.0), но я не знаю, как применить t и другую амплитуду... Любая помощь в этом?

https://github.com/d3/d3-ease#easeBackInOut

javascript d3.js transition easing

04.03.2019 13:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В конкретном случае d3.easeBackInOut вы можете установить амплитуду (называемую превышение в API) с помощью overshoot():

.ease(d3.easeBackInOut.overshoot(s))
//your value here----------------^

Вот демонстрация с использованием 3 в качестве превышения (значение по умолчанию — 1,70158):

const svg = d3.select("svg");
svg.append("circle")
  .attr("cx", 100)
  .attr("cy", 50)
  .attr("r", 10)
  .style("stroke", "black")
  .style("fill", "lightgray")
  .transition()
  .duration(2000)
  .ease(d3.easeBackInOut.overshoot(3))
  .attr("cx", 400);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width = "500" height = "100"></svg>

Кстати, с t связываться не нужно. Его значение от 0 до 1 автоматически передается функции плавности.

04.03.2019 13:26

Другие вопросы по теме

Подсказка не отображается, несмотря на наличие данных

D3-sankey-diagram выровнять ссылки по типу

При попытке поместить изображения внутри узла они не остаются в правильном положении в силовом макете

Визуализации D3.js из локальных файлов

D3 добавить масштабирование и панорамирование

Как правильно использовать тег Use в SVG с d3 js?

Угловое дерево D3

Цикл между цветами в D3 Javascript

Создайте шкалу, состоящую из нескольких доменов

D3.append("text") работает нормально, но .append("div").append("text") нет

Как применить отдельные параметры для смягчения переходов?

Ответы 1

Другие вопросы по теме

Похожие вопросы