BTS Project Lesson #3 — Using D3.js to Show Images
Change image based on button press. Use D3.js update pattern
Previous Lessons
Learning Resources
Review
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 ofselectAll('...')
to a constant calledimages
- data — chain the data command to the line above. The data is a single element array called holding
imageFile
. Bind the array to the constantimages
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’
Image Attributes
- x: 300
- y: 50
- height: 150
- width: 150
- xlink:href: location of file
Add in transitions.