d3-dispatch

Отправка — удобный механизм для разделения задач с слабо связанным кодом: регистрируйте именованные обратные вызовы, а затем вызывайте их с произвольными аргументами. Различные компоненты D3, такие как d3-drag, используют этот механизм для отправки событий слушателям. Подумайте об этом как об EventEmitter Node.js, за исключением того, что каждый слушатель имеет чёткое имя, поэтому их легко удалить или заменить.

Например, чтобы создать отправку для событий start и end:

const dispatch = d3.dispatch("start", "end");

Затем вы можете зарегистрировать обратные вызовы для этих событий, используя dispatch.on:

dispatch.on("start", callback1);
dispatch.on("start.foo", callback2);
dispatch.on("end", callback3);

Затем вы можете вызвать все обратные вызовы start, используя dispatch.call или dispatch.apply:

dispatch.call("start");

Как и function.call, вы также можете указать this контекст и любые аргументы:

dispatch.call("start", {about: "I am a context object"}, "I am an argument");

Хотите более сложный пример? Посмотрите, как использовать d3-dispatch для скоординированных представлений.

Установка

Если вы используете npm, npm install d3-dispatch. Вы также можете загрузить последнюю версию на GitHub. Для обычного HTML в современных браузерах импортируйте d3-dispatch из Skypack:

<script type="module">

import {dispatch} from "https://cdn.skypack.dev/d3-dispatch@3";

const d = dispatch("start", "end");

</script>

Для устаревших сред вы можете загрузить UMD-пакет d3-dispatch с CDN на базе npm, например, jsDelivr; экспортируется d3 глобальная переменная:

<script src="https://cdn.jsdelivr.net/npm/d3-dispatch@3"></script>
<script>

const d = d3.dispatch("start", "end");

</script>

Попробуйте d3-dispatch в вашем браузере.

Справочник API

d3.dispatch(types…) · Исходный код

Создаёт новую отправку для указанных событий types. Каждый type — это строка, например, "start" или "end".

dispatch.on(typenames[, callback]) · Исходный код

Добавляет, удаляет или получает callback для указанных typenames. Если функция callback указана, она регистрируется для указанных (полноценных) typenames. Если обратный вызов уже был зарегистрирован для заданных typenames, существующий обратный вызов удаляется перед добавлением нового.

Указанные typenames — это строка, например, start или end.foo. Тип может необязательно следовать за точкой (.) и именем; необязательное имя позволяет зарегистрировать несколько обратных вызовов для получения событий одного типа, таких как start.foo и start.bar. Чтобы указать несколько имён типов, разделяйте их пробелами, например, start end или start.foo start.bar.

Чтобы удалить все обратные вызовы для данного имени foo, скажем, dispatch.on(".foo", null).

Если callback не указан, возвращает текущий обратный вызов для указанных typenames, если таковой имеется. Если указано несколько имён типов, возвращается первый соответствующий обратный вызов.

dispatch.copy() · Исходный код

Возвращает копию этого объекта отправки. Изменения в этой отправке не влияют на возвращенную копию и наоборот.

dispatch.call(type[, that[, arguments…]]) · Исходный код

Как и function.call, вызывает каждый зарегистрированный обратный вызов для указанного type, передавая обратный вызов указанные arguments, с that в качестве this контекста. См. dispatch.apply для получения дополнительной информации.

dispatch.apply(type[, that[, arguments]]) · Исходный код

Как и function.apply, вызывает каждый зарегистрированный обратный вызов для указанного type, передавая обратный вызов указанные arguments, с that в качестве this контекста. Например, если вы хотите отправить ваши обратные вызовы custom после обработки события click, сохранив текущий this контекст и аргументы, вы можете сказать:

selection.on("click", function() {
  dispatch.apply("custom", this, arguments);
});

Вы можете передавать любые аргументы, которые хотите, обратным вызовам; чаще всего вы можете создать объект, который представляет событие, или передать текущий элемент данных (d) и индекс (i). См. function.call и function.apply для получения дополнительной информации.