Изменение изображения на основе нажатия кнопки. Использовать шаблон обновления D3.js

Предыдущие уроки

Образовательные ресурсы

Обзор

Обзор

  • изменить код в функции showImage
  • создайте переменную imageFile и назначьте имя файла изображения на диске в зависимости от значения нажатой кнопки
  • применить шаблон обновления данных D3.js

Шаблон

Примечание: для практики мы используем 6-шаговый шаблон обновления данных. Поскольку в обновляемом массиве есть только один элемент данных, вы можете использовать более простой метод в реальном проекте.

  1. выбрать — image присвоить результат selectAll('...') константе с именем images
  2. data — связывает команду данных со строкой выше. Данные представляют собой массив из одного элемента, который содержит imageFile. Привяжите массив к константе images с помощью .data([...]);
  3. выход — цепочка к константе images добавляет .remove() для удаления исходного файла изображения. Пример: images.exit().remove()
  4. обновление — цепочка к константе images. Обновление не является командой ключевого слова. Это шаг в процессе, на котором вы обновляете данные, которые изменились. Основные данные, которые изменились, — это расположение отображаемого файла изображения. Пример: images.attr(‘xlink:href’, location of file’)
  5. введитецепочку в константу images
  6. append — цепочка добавления к строке выше. Элемент HTML для добавления is image Пример: .append(‘image’

Атрибуты изображения

  • x: 300
  • y: 50
  • высота: 150
  • ширина: 150
  • xlink:href: расположение файла

Добавьте переходы.

Следующий урок

Урок №4 — настройка статистического графика