BTS Project Lesson #3 — Using D3.js to Show Images

Craig Oda

Published in

CodeCakes

2 min readNov 10, 2018

Change image based on button press. Use D3.js update pattern

Previous Lessons

Learning Resources

Review

In the top viewport, divide program into two logical structures

Overview

modify code in showImage function
create variable imageFile and assign to name of image file on disk based on the value of the button pressed
apply D3.js data update pattern

Pattern

Note: we are using the 6 step data update pattern for practice. As there is only one data element in the array you are updating, you can use an easier method in a real-world project

select — image assign the result of selectAll('...') to a constant called images
data — chain the data command to the line above. The data is a single element array called holding imageFile. Bind the array to the constant images with .data([...]);
exit — chain to the constant images add .remove() to delete the original image file. Example: images.exit().remove()
update — chain to the constant images. Update is not a keyword command. It is a step in the process where you update the data that has changed. The main data that changed is the location of the image file to display. Example: images.attr(‘xlink:href’, location of file’)
enter chain to the constant images
append — chain append to the line above. The HTML element to append is image Example: .append(‘image’