После моего первоначального опыта работы с документами, управляемыми данными, я был достаточно заинтригован, чтобы действительно захотеть полностью понять это. С этой целью я намеревался играть со всеми его частями, насколько мог, на своих условиях, пока не достиг твердого понимания.
Для начала я просто воссоздал ту же базовую страницу и начальную гистограмму, подробно описанные в репозитории г-на Харрисона.
После того, как я это сделал, меня больше всего беспокоило то, что, несмотря на то, что это приложение, оно было статичным, в нем не было возможности взаимодействия с пользователем. Чтобы исправить это, я решил интегрировать REACT. Я создал контролируемую форму, дал каждому вводу имя, соответствующее ключу в моем состоянии, и установил тип равным «число».
Затем в моей функции handleChange() я устанавливаю значение события в состояние, используя имя события.
Как только пользователь ввел все числа, которые он хотел, эти состояния будут помещены в массив данных, а ключ данных в моем состоянии (который инициализирован как пустой массив) будет установлен на значение этого массива данных.
Вот где я нахожусь в данный момент. Мой следующий шаг — передать this.state.data моему визуальному компоненту и использовать его для определения высоты гистограммы. Как только гистограмма заработает плавно, я попробую свои силы во всех бесчисленных способах визуализации данных, которые предлагает D3.
