Переход clipPath при обновлении данных

Question

Переход clipPath при обновлении данных

1

Это продолжение этого вопроса.

Здесь код: Plunker

Теперь я пытаюсь обновить clipPath в унисон со всем остальным, и я не могу успокоить его

Я пробовал различные методы, чтобы заставить его трансформироваться плавно, но каждый раз получать одинаковый результат. Метод, используемый в плункере, следующий:

defs.append("clipPath")
  .attr("id", "clip-above")
.append("rect");

g.selectAll("#clip-above>rect")
  .transition().duration(durations)
  .attr("width", width)
  .attr("height", y(1));

Но независимо от того, какой метод я использую, clipPath просто перескакивает на вновь вычисленную область.

Robert Andersson 17 янв. 2018, в 11:41

Источник

Теги:

javascript

d3.js

1 ответ

Ещё вопросы

Gerardo Furtado · Accepted Answer · 2018-01-17T09-13-00.000Z

Для меня нет никакого смысла, почему вы <clipPath> и повторно <clipPath> каждый раз, когда запускаете функцию update. Кроме того, есть много других вещей, которые нужно изменение: например. почему вы используете d3.csv внутри функции update? Поэтому я предлагаю вам опубликовать этот код в Code Review, поэтому мы можем предложить адекватные изменения (такой вопрос будет отключен здесь в SO).

Вернуться к вашему вопросу:

Добавьте <clipPath> вне функции update:

var defs = g.append("defs");

var clipAbove = defs.append("clipPath")
    .attr("id", "clip-above");

var clipAboveRect = clipAbove.append("rect")
    .attr("width", width)
    .attr("height", 0);

var clipBelow = defs.append("clipPath")
    .attr("id", "clip-below");

var clipBelowRect = clipBelow.append("rect")
    .attr("y", 0)
    .attr("width", width)
    .attr("height", 0);

И, в функции, просто выполните переход:

clipAboveRect.transition().duration(durations)
    .attr("height", y(1));

clipBelowRect.transition().duration(durations)
    .attr("y", y(1))
    .attr("height", height - y(1));

Вот обновленный Plunker: https://plnkr.co/edit/XcQOvupaS3hLU136blUk?p=preview

PS: Если вам требуется объяснение вашей проблемы, переход переходит из начального значения в конечное значение. Вам нужно как для перехода на работу.

"Почему вы используете d3.csv внутри функции обновления?" Потому что в моем готовом графике у меня будет более одного CSV-файла для переключения, как я сделал здесь . Я получил идею от Марка здесь, на SO, в ответе, который он дал мне.
Нет, это неправильный подход! d3.csv является асинхронным, и поэтому вы не должны делать это внутри функции, вызываемой из выпадающего меню. Вы должны загрузить все данные, необходимые для dataviz сразу. Вы не видите разницы, потому что CSV, вероятно, маленький, но в тот день, когда вы получите большой CSV (или медленное соединение), ваш код будет плохо работать.
Интересно, вот его ответ, кстати, я опубликую вопрос об обзоре кода позже об этом, и большое спасибо за ваш ответ