d3 component

D3-компонент

Легкая абстракция компонентов для D3.js.

Функции:

• Инкапсулирует общий шаблон обновления.
• Компонируемые (даже рекурсивные!) Функциональные компоненты без состояния.
• Надежный destroy для очистки вещей.
• Отлично работает с Redux.

Примеры:

Сообщения | ES6 версия	Спиннер | ES6 версия	Секундомер (Redux) | ES6 версия
Счетчик (Redux) | ES6 версия	Тодос	Рассеянный сюжет с меню (Redux) ES6 версия | Радиус выберите вариант
Часы	Аэропорты часов	Пример Viewer (Redux, ES6)
Фрактальная круговая диаграмма (ES6)

Используя эту абстракцию компонентов, вы можете легко инкапсулировать компоненты пользовательского интерфейса, управляемого данными, как концептуальные «коробки-коробки», чисто изолируя проблемы для различных уровней вашего дерева DOM. Эта абстракция компонентов аналогична концепции и функциональности, чтобы реагировать функциональные компоненты без состояния. Все, что компонент должен представить себя и взаимодействовать с состоянием приложения, передается через дерево компонентов во время рендеринга. Компоненты не хранят никакого местного штата; Это основное различие между D3-компонентом и схемой многократного использования. Специальной обработки не дается событиям или делегированию событий, поскольку предполагаемое использование находится в пределах однонаправленной архитектуры потока данных, таких как Redux.

Установка

Если вы используете NPM, npm install d3-component . В противном случае загрузите последний релиз. Вы также можете загрузить непосредственно с UNPKG.com в качестве отдельной библиотеки. AMD, CommonJS и ванильная среда поддерживаются. В ванили экспортируется Global d3 :

 < script src =" https://unpkg.com/d3@4 " > </ script >
< script src =" https://unpkg.com/d3-component@3 " > </ script >
< script >
  var myComponent = d3 . component ( "div" ) ;
</ script > 

Ссылка на API

ПРИМЕЧАНИЕ. Был недавний выпуск крупной версии, и вместе с ним были существенные изменения API.

Таким образом, API выглядит так:

 var myComponent = d3 . component ( "div" , "some-class" )
  . create ( ( selection , d , i ) => { ... } ) // Invoked for entering component instances.
  . render ( ( selection , d , i ) => { ... } ) // Invoked for entering AND updating component instances.
  . destroy ( ( selection , d , i ) => { ... } ) ; // Invoked for exiting instances, may return a transition.

// To invoke the component,
d3 . select ( "body" ) // create a selection with a single element,
  . call ( myComponent , "Hello d3-component!" ) ; // then use selection.call().

Чтобы увидеть полный API в действии, ознакомьтесь с этим примером "Hello D3-Component".

# component ( Tagname [, classname ])))

Создает новый генератор компонентов, который управляет и разрабатывает элементы DOM указанного Tagname .

Необязательное параметр classname определяет значение атрибута class в управляемых элементах DOM.

# компонент . Создать ( функция (выбор, D, i) )

Устанавливает функцию создания этого генератора компонентов, которая будет вызвана всякий раз, когда создается новый экземпляр компонента, который передается выбором , содержащим текущий элемент DOM, текущий Datum ( D ) и индекс текущего Datum ( i ).

# компонент . рендеринг ( функция (выбор, D, i) )

Устанавливает функцию рендеринга этого генератора компонентов. Эта функция будет вызвана для каждого экземпляра компонента во время рендеринга, который проходит выбор, содержащий текущий элемент DOM, текущий Datum ( D ) и индекс текущего Datum ( i ).

# компонент . уничтожить ( функция (выбор, d, i) )

Устанавливает функцию разрушения этого генератора компонентов, которая будет вызоваться всякий раз, когда будет разрушен экземпляр компонента, который проходит выбор , содержащий текущий элемент DOM, текущий Datum ( D ) и индекс текущего Datum ( i ).

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

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

# компонент . ключ ( функция )

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

# компонент ( выбор [, data [, context ]])

Образует компонент на заданный выбор , выбор D3, содержащий один элемент DOM. Сырой элемент DOM также может быть принят в качестве аргумента выбора . Возвращает выбор D3, содержащий объединенные выборы Enter и обновление для экземпляров компонентов.

• Если данные указаны и являются массивом, один из экземпляров компонента будет отображаться для каждого элемента массива, а функция рендеринга получит один элемент массива данных в качестве аргумента D.
  • Полезный случай: если данные указаны как пустой массив [] , все ранее визуализированные экземпляры компонентов будут удалены.
• Если данные указаны и не являются массивом, будет отображаться точно один экземпляр компонента, а функция рендеринга получит значение данных в качестве аргумента D.
• Если данные не указаны, будет отображаться точно один экземпляр компонента, а функция рендеринга будет получать undefined в качестве аргумента D.

Таким образом, компоненты могут быть отображены с использованием следующих подписей:

• selection.call(myComponent, dataObject) → один экземпляр, функция рендеринга D будет dataObject .
• selection.call(myComponent, dataArray) → dataArray.length экземпляры, функция рендеринга D будет dataArray[i]
• selection.call(myComponent) → один экземпляр, функция рендеринга D будет undefined .

Если указан объект контекста , каждый элемент данных в массиве данных будет мелко объединен в новый объект, прототип которого является контекстным объектом, а результирующий массив будет использоваться вместо массива данных . Это полезно для передачи функций обратного вызова через дерево компонентов. Чтобы прояснить, следующие два призывания эквивалентны:

 var context = {
  onClick : function ( ) { console . log ( "Clicked!" ) ;
} ;
selection . call ( myComponent , dataArray . map ( function ( d ) {
  return Object . assign ( Object . create ( context ) , d ) ;
} ) ) ; 

 var context = {
  onClick : function ( ) { console . log ( "Clicked!" ) ;
} ;
selection . call ( myComponent , dataArray , context ) ;